Solved

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

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
PHP and Soap 3 27
get radio button vale in array 7 36
JavaScript check IF number exists THEN ... 9 53
sql sentence 2 10
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

707 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

16 Experts available now in Live!

Get 1:1 Help Now