sofuscomer
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.
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.
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
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]">
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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>
ASKER
My mistake. There is no difference if its a hidden or not.
So the solutions works perfekt!
Thanks
So the solutions works perfekt!
Thanks
ASKER
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