Solved

How do I make javascript put value into form input fields?

Posted on 2014-02-06
5
336 Views
Last Modified: 2014-02-06
Hi there!
I have this website where i per vimeo username load my videos.
If I click one of these videos the below code loads a vimeo movie in this div id="embed".

Now thats fine.

But I would like for it to ALSO take some additional values and populate several input fields in my form.

So besides making the div with the id="embed, I would like for it to also put the vimeo attribute title into a form input text with an id ="vtitle". E.g.

<input name="vtitle" type="text" required id="vtitle" form="item-new" placeholder="Movie Title" tabindex="1" value="[b]??????[/b]">

Open in new window


And more of the same. But I guess, that once I learn how to populate one input , I will see how to copy that for other input fields.




<script>

		// Tell Vimeo what function to call
		var oEmbedCallback = 'embedVideo';

		// Set up the URL
		var oEmbedUrl = 'http://vimeo.com/api/oembed.json';

		// Load the first one in automatically?
		var loadFirst = true;

		// This function puts the video on the page
		function embedVideo(video) {
			var videoEmbedCode = video.html;
			document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
		}

		// This function uses oEmbed to get the last clip
		function latestVideo(video) {


		}
		// Something Sofus is working on!, not any effect
		function setupGallery(videos) {
    // 0 = 1st video
    getVideo(videos[0].url);                 

			var videoID = videos[0].id;
			var videoTitle = videos[0].title;
			var videoDesc= videos[0].description;
			var videoDur = videos[0].duration;
			var videoImg = videos[0].thumbnail_large;

    for (var i = 0; i < videos.length; i++) {
        var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_large + '" class="thumb" />';
        html += '<p class="tdesc"> <span class="title">' + videos[i].title + '</span> <br /><br />';
        html += '<span class="ddesc">' + videos[i].description + '</span></p></a>';
        $('#embed').append(html);
    }                                     
}

		// This function runs when the page loads and adds click events to the links
		function init() {
			var links = document.getElementById('thumbs').getElementsByTagName('a');

			for (var i = 0; i < links.length; i++) {
				// Load a video using oEmbed when you click on a thumb
				if (document.addEventListener) {
					links[i].addEventListener('click', function (e) {
						var link = this;
						loadScript(oEmbedUrl + '?url=' + link.href + '&callback=' + oEmbedCallback);
						e.preventDefault();
					}, false);
				}
				// IE (sucks)
				else {
					links[i].attachEvent('onclick', function (e) {
						var link = e.srcElement.parentNode;
						loadScript(oEmbedUrl + '?url=' + link.href + '&callback=' + oEmbedCallback);
						return false;
					});
				}
			}
			

		

			// Load in the first video
			if (loadFirst) {
				loadScript(oEmbedUrl + '?url=' + links[0].href + '&callback=' + oEmbedCallback);
			}
		}

		// This function loads the data from Vimeo
		function loadScript(url) {
			var js = document.createElement('script');
			js.setAttribute('src', url);
			document.getElementsByTagName('head').item(0).appendChild(js);
		}


		// Call our init function when the page loads
		window.onload = init;
		
		

	</script>

Open in new window


And please help me by posting the entire code snippet. Cause my javascript is not very good, and I still have to look forward to the day of grasping javascript logic.
Thank you
Sofus
Sk-rmbillede-2014-02-06-kl.-23.1.png
0
Comment
Question by:sofuscomer
  • 3
  • 2
5 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39840666
// This function puts the video on the page
function embedVideo(video) {
   document.getElementById("vtitle").value = video.title;
   var videoEmbedCode = video.html;
   document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
}
0
 

Author Comment

by:sofuscomer
ID: 39840717
Hi Leakim971
Thanks, that worked like a charm.
And I accept this as my solution.
But can you help me with this last thing that is related.

The code you sent me does not seem to work on input type="hidden" only text and textarea?
Is this the case?

Atb Sofus Comer
0
 

Author Closing Comment

by:sofuscomer
ID: 39840718
My question was answered and thats great.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39840729
The code you sent me does not seem to work on input type="hidden" only text and textarea?

It should, be sure to use the right ID attribute.
If you're OK to use a framework, check this solution :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>

	var vimeoApp = angular.module("vimeoApp", []);

	vimeoApp.controller("Ctrl", ["$scope", "Vimeo", function($scope, Vimeo) {

		$scope.urls = ["https://vimeo.com/67993041", "https://vimeo.com/17273552", "https://vimeo.com/43020699"];
		$scope.video = {};

		$scope.getVideo = function(event, link) {
			event.preventDefault();
			Vimeo.get(link.url).then(function(video) {
				var videoEmbedCode = video.html;
				angular.extend($scope.video, video);
				document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
			});
		}

	}]);

	vimeoApp.factory("Vimeo", ["$http", "$q", function($http, $q) {
		return {
			get: function(url) {
				var deferred = $q.defer();
				$http.jsonp("http://vimeo.com/api/oembed.json?callback=JSON_CALLBACK&url="+url).success(function(data, status, headers, config) {
					deferred.resolve(data);
				})
				return deferred.promise;
			}
		}
	}]);

</script>
</head>
<body ng-app="vimeoApp" ng-controller="Ctrl">
	<ul id="thumbs">
		<li ng-repeat="url in urls"><a ng-href="url" ng-bind="url" ng-click="getVideo($event, this)"></a></li>
	</ul>
	<form>
		<div><input type="text" required tabindex="1" name="vid" id="vid" placeholder="Movie Id" ng-model="video.video_id"></div>
		<div><input type="text" required tabindex="2" name="vtitle" id="vtitle" placeholder="Movie Title" ng-model="video.title"></div>
	</form>
	<div id="embed"></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:sofuscomer
ID: 39840731
My mistake. There is no difference if its a hidden or not.
So the solutions works perfekt!
Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now