Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event not firing when OnChange of dropdownlist called

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>
like image 258
ios85 Avatar asked Jan 27 '12 20:01

ios85


People also ask

Why is Onchange not working?

onchange is not fired when the value of an input is changed. It is only changed when the input's value is changed and then the input is blurred. What you'll need to do is capture the keypress event when fired in the given input. Then you'll test the value of the input against the value before it was keypressed.

What triggers Onchange event?

The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.

Which property is used for adding values in dropdown list?

Insert(int index, “ItemName”): if we want the item to be added at a specific position, this property helps to add a new item at a specific position in the drop-down list control. DropDownList1.


2 Answers

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
    }
}
like image 174
Selvakumar Arumugam Avatar answered Sep 23 '22 15:09

Selvakumar Arumugam


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>
like image 27
jrummell Avatar answered Sep 21 '22 15:09

jrummell