Solved

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

Posted on 2014-02-06
5
342 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

696 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