Event not firing when OnChange of dropdownlist called

Question

On my dropdownlist, I set it up so the onchange should call checkval and pass in the id of element. I just started off with really basic login, but cant even get the alert to display. What am I doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function checkval(id){
    if($('#' + id).val == "Other")
    {
        alert("You Selected Other");
        //other logic will go here
    }
}
</script>
</head>

<body>
<select name="items1[]" id="items1[]" onchange="checkval(id);">
    <option selected value="">Select One</option>
    <option value="one">One</option>
    <option value="Other">Other</option>
  </select>

<select name="items2[]" id="items2[]" onchange="checkval(id);">
    <option selected value="">Select One</option>
    <option value="one">One</option>
    <option value="Other">Other</option>
  </select>
</body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

Edit: Seems like it fails for id items1[].. So changed your markup bit.. Fixed jsFiddle here.

See link for What characters are allowed in DOM IDs?

Change your markup as onchange="checkval(this.id);".

and the script as

function checkval(id){
    if($('#' + id).val() == "Other")
    {
        alert("You Selected Other");
        //other logic will go here
    }
}

edited May 23 '17 at 12:08

Community

1
1

answered Jan 27 '12 at 20:46

Selvakumar Arumugam

79,297
15
120
134

score 2 · Answer 2 · answered Jan 27 '12 at 20:46

Try this:

<select name="items1[]" id="items1[]" onchange="checkval(this.id);">

Or even better, wire up your handler unobtrusively,

$(document).ready(function(){
    $(".items").change(function(){ 
        checkval(this.id);
    });
});

and remove the onchange attributes and add a class:

<select name="items1" id="items1" class="items">
    <option selected value="">Select One</option>
    <option value="one">One</option>
    <option value="Other">Other</option>
  </select>

<select name="items2" id="items2" class="items">
    <option selected value="">Select One</option>
    <option value="one">One</option>
    <option value="Other">Other</option>
  </select>

And as others have pointed out, don't forget the parentheses for `.val()` in `checkval()`. — jrummell, Jan 27 '12 at 20:56

score 1 · Answer 3 · answered Jan 27 '12 at 20:52

val is a function so use it as a function val() that will work.

Alernatively you can pass the selected value itself to chectVal method.

Change in your markup.

<select name="items1[]" id="items1[]" onchange="checkval(this.value);">
<select name="items2[]" id="items2[]" onchange="checkval(this.value);">

JS

function checkval(value){
    if(value == "Other")
    {
        alert("You Selected Other");
        //other logic will go here
    }
}

score 0 · Answer 4 · answered Jan 27 '12 at 20:46

You should call val with brackets like so:

function checkval(id){
    if($('#' + id).val() == "Other")
    {
        alert("You Selected Other");
        //other logic will go here
    }
}

As SKS specified, you also have an error in the onchange event, it should be this.id. However, you chould change the code to be a bit easier.

Onchange:

<select name="items1[]" id="items1[]" onchange="checkval(this);">

And your function:

function checkval(el){
    if($(el).val() == "Other")
    {
        alert("You Selected Other");
        //other logic will go here
    }
}

Also, do you get any errors in the console?

score 0 · Answer 5 · answered Jan 27 '12 at 20:47

0

$('#' + id).val is a function.
The function is never equal to "Other".

You probably want to call the function using parentheses.

answered Jan 27 '12 at 20:47

SLaks

868,454
176
1,908
1,964

Event not firing when OnChange of dropdownlist called

5 Answers5