Link to home
Start Free TrialLog in
Avatar of sofuscomer
sofuscomerFlag for Denmark

asked on

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

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
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sofuscomer

ASKER

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
My question was answered and thats great.
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

My mistake. There is no difference if its a hidden or not.
So the solutions works perfekt!
Thanks