change() event for select input in IE9

Question

I'm aware that jQuery's change() method doesn't fire for select and radio inputs in IE9. However, none of the workarounds I've found are working for me.

Here's the code that works in all decent browsers:

    $("select#orderby").change( function(e){
        console.log("order");
        $("#candidate-filters").submit();
    });

Here's a version of what I see people doing to get around this problem in IE9:

    $("select#orderby").bind( ($.browser.msie)? 'propertychange' : 'change', function(e){
        console.log("order");
        $("#candidate-filters").submit();
    });

This doesn't work when I try it. No errors in the console. Just nothing happens. What am I doing wrong?

EDIT: When I switch to the .on() method I can cause the page to reload (presumably as a result of the .submit() action) but the form select input isn't captured. The page simply reloads as if nothing was changed.

IT WORKS! But there was one other part that I overlooked which others might find useful. IE doesn't support the HTML5 form="form_id" attribute which lets you place a an form element outside of the <form> tags. So once I was able to bind the event, I also had to had to append the value into the form:

if ($.browser.msie) {
    $("select#orderby").bind( "propertychange", function(e){
        //console.log("order");
        var update = $(this).val();
        $("#candidate-filters").append('<input type="hidden" name="orderby" value="'+ update +'" /> ');
        $("#candidate-filters").submit();
    });
} else {
    $("select#orderby").change( function(e){
        console.log("order");
        $("#candidate-filters").submit();
    });
}

I SPOKE TOO SOON: The code above only works in IE8 but not IE9. Any ideas?

@Jason I can't use click because it's a select drop-down. So the event fires and submits the form before the user can make the new selection. — emersonthis, Oct 19 '12 at 21:22
my bad, I saw "radio inputs" in your question and seemed to have ignored the select. — Jason, Oct 19 '12 at 21:27
If you are using the jQuery version earlier than 1.5 then this is your issue: http://bugs.jquery.com/ticket/8485 — , Apr 29 '13 at 20:22

Chase · Answer 1 · 2012-10-22T15:33:21.067

1

This example seemed to work fine for me in jsfiddle for IE9:

jQuery

$("#test").on("change", function(){
    alert("test changed to: " + this.value)
});

HTML

<select id="test">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

There is the option of potentially using on blur as well, but it definitely depends on the specific situation.

ALSO, please be advised that console.log does not work in IE...and that could be part of your problem. As @MikeMcCaughan states in the comments, the console should work with IEs developer tools.

Please see the compatability table here. It looks like the form attribute may not be supported in IE yet.

edited Oct 22 '12 at 15:33

answered Oct 19 '12 at 21:05

Chase

29,019
1
49
48

Note: `console.log` works fine in IE9, if you have the "F12 developer tools" open. It might still be part of your problem, but just to be clear. – Heretic Monkey Oct 19 '12 at 21:13
I tried this with and without console.log. The page reloads but the new value doesn't get caught when the form gets submitted. It may be relevant that this select element is outside of the
element, but uses the form="" attribute to associate it, a la HTML5.
– emersonthis Oct 19 '12 at 21:27
Thanks @MikeMcCaughan for clarifying. I don't use IE any more than I have too, so I appreciate the comment. – Chase Oct 22 '12 at 12:25
@Emerson, that helps a bit. It seems your issue is a compatibility problem. Please see my update above. Also, whoever the phantom down vote was, please let me know and I'll make any necessary changes. thanks. – Chase Oct 22 '12 at 15:34

score -1 · Answer 2 · edited May 23 '17 at 10:33

-1

Did you try changing

   $("select#orderby").change( function(e){
        console.log("order");
        $("#candidate-filters").submit();
    });

to

   $("select#orderby").click( function(e){
        console.log("order");
        $("#candidate-filters").submit();
    });

or using .on() or .live() , depending on your version of jquery ,that has worked for me , it is also from Here on SO

edited May 23 '17 at 10:33

Community

1
1

answered Oct 19 '12 at 21:13

Scott Selby

9,420
12
57
96

But the click event wont' work for a select input. The form will get selected as soon as the drop-down opens. – emersonthis Oct 19 '12 at 23:09

change() event for select input in IE9

2 Answers2