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().