Jquery .change isn't working in Chrome

Question

form some reason this seems to be working fine in FF but not in Chrome. I have tried wrapping in $(window).load( function() {...}); and even removing all other Javascript on the page (other then the Jquery Form Wizard plugin.

 $('#state').change(function() {
            var state = $("#state").val();
            if (state === "CA" || state === "NV" || state === "OR" || state === "WA" || state === "AZ") {
                $("#first .ins_link_next").val("insurance_type");
                }
                else {
                $("#first .ins_link_next").val("out-of-area");

                }
    });

The page can be viewed at http://173.45.237.55/qrf/

Any help is much appreciated!

Answer 1

You have a onKeyup handler in the input element which sets the input value upper case. This actually detached the event handler (in Chrome). To fix this, one solution is to move the onKeyup function into the change function:

$('#statecode').change(function() {
        this.value=this.value.toUpperCase();
        var state = $("#statecode").val();
        if (state === "CA" || state === "NV" || state === "OR" || state === "WA" || state === "AZ") {
            $("#first .ins_link_next").val("insurance_type");
            }
            else {
            $("#first .ins_link_next").val("out-of-area");

            }
});

Also, you do not need $(window).load() to wrap your function inside $(document).ready().

Answer 2

remove the $(window).load( function() { around your function, that can only damage stuff.

there is a lot "$(function () {...", it can be a cause, but I doubt it.

Point is, the script works... sometimes. more often when you delete the value.

Actually. there is 2 #state change handler, look for:

$(function() {
    $('#state').change(function() {
            $("#ins_type").val($('#ins_type')[0].defaultValue);
    });
});

and that's the problem both execute, and the result is random. delete that nagging little one, and enjoy ;)

Answer 3

roselan is right, you don't need a $(window).load() inside your $(document).ready()

In the Chrome console, I disabled the keyup handler and it worked. You may just want to move the toUpperCase() code into the change handler.

This jsfiddle boils your problem down further: http://jsfiddle.net/G3CMH/ When you change the field value in a keyup event, the change event doesn't get fired on blur.