Solved

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

Posted on 2014-02-06
5
338 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
This article discusses four methods for overlaying images in a container on a web page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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 …

772 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