I'm forced to work with IE8 (8.0.7601.17514) and I have this simple page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form action=".">
<input type="radio" name="rad" value="1" onchange="alert(1);"/>
<input type="radio" name="rad" value="0" onchange="alert(0);" checked="checked"/>
</form>
<a href="http://google.com">some dummy link</a>
</body>
</html>
What I expect is that as the second radio button is selected, clicking on the first one will immediately raise an Alert. This works fine in FF.
What actually happens is that when I click the first radio, nothing happens. Then, when the element is blurred (eg. I click somewhere else, the other radio, some link in the page etc), THEN the alert is raised.
Is there a workaround to this?
EDIT:
apparently this behavior is exactly according to W3C spec
change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
(thanks to @mu-is-too-short).
The workaround to this is to add a onclick blur+focus:
function radioClick()
{
this.blur();
this.focus();
}
<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
