CODEWITHSUNDEEP
javascriptformsdom
jerome
jerome

Reputation: 4977

Using Javascript to change URL based on option selected in dropdown

I cannot seem to 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>

Upvotes: 1

Views: 14613

Answers (4)

James
James

Reputation: 111890

Your function won't run within the context of the 'select' element because you're just calling the function regularly. To combat this either unobtrusively handle the event or pass 'this' from within 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: (The 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);

Upvotes: 4

Guffa
Guffa

Reputation: 700212

You can only use this when you are in the event code. When you are in the function, this referrs to the window object. Send the reference 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>

Upvotes: 1

Matthew Flaschen
Matthew Flaschen

Reputation: 284786

Is this homework? There are multiple ways to correct it but one simple way is to make selectVideo take a obj parameter, then change all references to inside it to obj. Then, do selectVideo(this) in the onchange.

I highly recommend QuirksMode, particularly this this page, if you want to really understand this.

Upvotes: -1

RichieHindle
RichieHindle

Reputation: 281405

I'm not sure what the value of this is in your code, but it's not the <select> element. 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>

Upvotes: 6

Related Questions