Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4
Fixed in: IE9 RC 1 (in IE9 standards mode only)
The onchange event can be attached (inline or as an event handler) to any form element. It fires whenever the value of the form field changes. Unfortunately, the behavior is a bit strange in IE, in that for a checkbox, or a radio button field, the event doesn't fire when it is supposed to (right when you click the option you want to choose), but instead it only fires, when you click elsewhere on the page/form, or if you explicitly call blur(); on the field.
Example:
<input type="radio" name="foo" value="Green" onchange="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onchange="alert(this.value);"/>Blue
As soon as you click on either of these radio buttons, the alert should pop up telling you what you just selected.
Try it out!
Green
Blue
You'll notice that it works just fine in all browsers except Internet Explorer. In fact, in IE, clicking once will not pop up the alert, but clicking the other radio button will pop up the alert, but the value is the last radio button clicked.
Known Workarounds: One. Instead of using the onchange event, use the onclick event for radio and checkbox elements instead (or at least for IE)
Example Workaround Code:
<input type="radio" name="foo" value="Green" onclick="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onclick="alert(this.value);"/>Blue
Test this version with onclick:
Green
Blue
Related Issues: None.
Posts
