Jquery Onchange event not being triggered

Question

I have an onChange event, but upon change it is not being triggered. I have verified I am calling the fields correctly.

    $("#SRIEquipmentDDL").change(function() {
    if ($(this).val() == "3") {
        $("#SRILift").show();
    } else {
        $("#SRILift").hide();
    }
});

<div id="SRIEquipment">
            <div class="TextField">Equipment:</div>
            <div class="InputField">
                <select name="SRIEquipmentDDL" id="SRIEquipmentDDL" class="DropDownField">
                    <option value="0" <?php if ($_POST['SRIEquipmentDDL'] == "0") {echo "selected='selected'";} ?> >Select Chair Type</option>
                    <option value="1" <?php if ($_POST['SRIEquipmentDDL'] == "1") {echo "selected='selected'";} ?> >Manual Wheelchair</option>
                    <option value="2" <?php if ($_POST['SRIEquipmentDDL'] == "2") {echo "selected='selected'";} ?>>Power Wheelchair</option>
                    <option value="3" <?php if ($_POST['SRIEquipmentDDL'] == "3") {echo "selected='selected'";} ?>>Lift Chair</option>
                    <option value="4" <?php if ($_POST['SRIEquipmentDDL'] == "4") {echo "selected='selected'";} ?>>Scooter</option>
                    <option value="5" <?php if ($_POST['SRIEquipmentDDL'] == "5") {echo "selected='selected'";} ?>>Lifts</option>
                    <option value="6" <?php if ($_POST['SRIEquipmentDDL'] == "6") {echo "selected='selected'";} ?>>CPM</option>
                    <option value="8" <?php if ($_POST['SRIEquipmentDDL'] == "7") {echo "selected='selected'";} ?>>Walker</option>                          
                    <option value="9" <?php if ($_POST['SRIEquipmentDDL'] == "8") {echo "selected='selected'";} ?>>Other</option>
                </select>
            </div>
        </div>
        <div id="SRILift">
            <div class="TextField">Lift Type:</div>
            <div class="InputField">
                <select name="SRILiftTypeDDL" id="SRILiftTypeDDL" class="DropDownField">
                    <option value="0" <?php if ($_POST['SRILiftTypeDDL'] == "0") {echo "selected='selected'";} ?> >Select Lift Type</option>
                    <option value="1" <?php if ($_POST['SRILiftTypeDDL'] == "1") {echo "selected='selected'";} ?> >Stair Lift</option>
                    <option value="2" <?php if ($_POST['SRILiftTypeDDL'] == "2") {echo "selected='selected'";} ?>>Porch Lift</option>
                    <option value="3" <?php if ($_POST['SRILiftTypeDDL'] == "3") {echo "selected='selected'";} ?>>Outside Vehicle Lift</option>
                    <option value="4" <?php if ($_POST['SRILiftTypeDDL'] == "4") {echo "selected='selected'";} ?>>Inside Vehicle Lift</option>
                    <option value="5" <?php if ($_POST['SRILiftTypeDDL'] == "5") {echo "selected='selected'";} ?>>Ceiling Lift</option>                     
                    <option value="6" <?php if ($_POST['SRILiftTypeDDL'] == "6") {echo "selected='selected'";} ?>>Other</option>
                </select>
            </div>
        </div>

It looks like you are trying to bind the event handler before the element exists. Please read the [jQuery tutorial](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery) to learn how to set up jQuery properly. Also have a look at this question: http://stackoverflow.com/q/14028959/218196. — Felix Kling, Jan 30 '13 at 15:15
yes. $(document).ready(function (){ I have this at the start of the jquery document under the header. — n_starnes, Jan 30 '13 at 15:17
Please define "upon change". Does anything happen if you chose an item then click somewhere else on the page, giving the focus to another field? — Laurent S., Jul 24 '15 at 09:49

score 0 · Answer 1 · answered Jan 30 '13 at 15:17

0

Try something like this:

 $('#yourSelectId').change(function() {
    var selectedVal = $('#yourSelectId option:selected').attr('value');
});

make sure you code is inside a ready function - http://api.jquery.com/ready/ or it is after the HTML that create the select

answered Jan 30 '13 at 15:17

kleinohad

5,325
1
23
32

$(document).ready(function (){ is at the start I'm talking just about what triggers it. I have other onChange events like this that work fine, It is just this one that is not working. – n_starnes Jan 30 '13 at 15:20
I am not, which is weird. I'm going to try a few different method will post if none or one of the works. – n_starnes Jan 30 '13 at 17:13

score 0 · Answer 2 · answered Jan 30 '13 at 15:49

The problem you're facing is that often select boxes will not fire the change event while they are focused.

Since you are using JQuery, the solution is to use .click() in conjunction with .blur() in order to trigger the onchange event.

I found this Fiddle which demonstrates what you'll want to do:

http://jsfiddle.net/acrashik/wLWMc/

score -1 · Answer 3 · answered Jan 30 '13 at 15:29

-1

Can you try the the jquery bind() method?? If it doesn't work try to check the value inside your select ...may be there are INTEGERS try then change your condition to :

if ($(this).val() == 3) {

answered Jan 30 '13 at 15:29

Jean Zeh Mbida

34
4

`.change` and `.bind` just call `.on` internally. Switching the method would not make a difference. – Felix Kling Jan 30 '13 at 15:33
.bind has been deprecated since 1.7, use .on instead – Tjirp Jan 30 '13 at 15:57

shafiq.rst · Answer 4 · 2015-07-24T09:45:07.893

-1

Try using live in your code

 $("#SRIEquipmentDDL").on('change',function() {
            if ($(this).val() == "3") {
                $("#SRILift").show();
            } else {
                $("#SRILift").hide();
            }
        });

edited Jul 24 '15 at 09:45

answered Jan 30 '13 at 15:55

shafiq.rst

1,246
1
12
25

1

.live has been deprecated since 1.7, use .on instead – Tjirp Jan 30 '13 at 15:56

Jquery Onchange event not being triggered

4 Answers4