Using Javascript to change the url based on the option selected in the dropdown menu
I cannot get this to work. Any thoughts?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(){
var urlString = "http://www.mycookingsite.com/";
var selectedVideo = this.options[this.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select onchange="selectVideo()">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
a source to share
You can this
only use it if you are in the event code. When you are in a function, this
refer to the window object. Send the link as a parameter to the function:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(obj){
var urlString = "http://www.mycookingsite.com/";
var selectedVideo = obj.options[obj.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select onchange="selectVideo(this)">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
a source to share
I'm not sure what the value this
is in your code, but it is not an element <select>
. Here's some working code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(){
var urlString = "http://www.mycookingsite.com/";
var videos = document.getElementById('videos');
var selectedVideo = videos.options[videos.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select id='videos' onchange="selectVideo()">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
a source to share
Your function will not work in the context of a "select" element, because you are simply calling the function regularly. To combat this, either handle the event unobtrusively, or pass 'this' from your onchange handler:
Option 1:
// first, give 'select' an id
document.getElementById('select-id').onchange = selectVideo;
Option 2:
<select onchange="selectVideo.call(this)">
Option 3: (Best IMHO)
function addEvent(elem, type, fn) {
var W3C, callback = function(e){ fn.call(elem, e||window.event); };
((W3C = elem.addEventListener) || elem.attachEvent)
((W3C?'':'on') + type, callback, false);
return callback;
}
addEvent(document.getElementById('select-id'), 'change', selectVideo);
a source to share
Is this homework? There are several ways to fix this, but one easy way is to make selectVideo take the obj parameter and then change all references to it inside obj. Then select selectVideo (this) in onchange.
I highly recommend QuirksMode , especially this this page if you really want to understand this.
a source to share