IE8 & IE7 onchange event is triggered only after repeated selection

Question

I have a group of radio with an onchange handler:

<input type="radio" name="Q12" value="radio" id="Q12_0"  onchange="nextPnl('Q12');">
<br/>
<input type="radio" name="Q12" value="radio" id="Q12_1"  onchange="nextPnl('Q12');">
         ​

function nextPnl(did)
{
document.write(did);

}​

The problem is that in IE8 & IE7, the onchange event is triggered only after repeated selection.

Please view this demo in IE's Developer Tools [Browser Mode] IE8: http://jsfiddle.net/3zwur/2/

Matteo

You can find a general solution for the IE7/IE8 onchange event bug in this article. – Phosphatize

Answer 1

This is due to a bug with IE7 and IE8's change events. You should instead listen to the click event.

As shown in this table on quirks mode, the change event on radio buttons and checkboxes is quite buggy in IE7 and IE8.

You can listen to the click event like so:

<input type="radio" name="Q12" value="radio" id="Q12_0"  onclick="nextPnl('Q12');">
<br>
<input type="radio" name="Q12" value="radio" id="Q12_1"   onclick="nextPnl('Q12');">

And a fork of your fiddle: http://jsfiddle.net/T7VYL/

Usually, using a javascript library such as JQuery and YUI make your life easier, although from my testing, they do not fix this bug in older versions of IE.

If you would still like to listen to the change event, you can deploy this fix: http://www.ridgesolutions.ie/index.php/2011/03/02/ie8-chage-jquery-event-not-firing/. Basically it listens for the click event, and then causes the element to fire a change event.

As demonstrated by the asker's fiddle: http://jsfiddle.net/3zwur/3

Boggers

I just tested JQuery and YUI3, and unfortunately, they do not fix this bug in older versions of IE. Your solution is to listen to the click event, or cause the change event to fire like so: ridgesolutions.ie/index.php/2011/03/02/… – Boggers

This fired prematurely for me — the click is registered before the file input dialog appears. My solution was to execute the change function on a setTimeout 0 milliseconds after the click, abusing asynchronicity to allow the stack to clear (and the file input action to resolve) before this happens: onchange="setTimeout(function deferNextPnl(){nextPnl('Q12')},0)". – Woodyard

"Change" is the preferred event for checkboxes and I just spent probably two frustrating hours trying to get it to work in modern browsers and IE8 but not having it work in IE8 but when I read this and changed the event to "onclick" IE8 worked. – Degraw

Answer 2

Another option is to have an onchange event as you already have, and add an onclick event which removes focus from the radio button:

<input type="radio" name="Q12" value="radio" id="Q12_0" onclick="this.blur()" onchange="nextPnl('Q12');">

Framboise

Answer 3

Another solution is to put the onchange event on the enclosing form via jQuery.

$('#form').on('change', function() {
    $(this).submit();
});

Accustom