onchange on radiobutton not working correctly in IE8

Asked 14/5, 2012 at 7:20 Answered 14/5, 2012 at 7:32

Solved javascript html internet-explorer radio-button

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);"/>

Dorcia answered 14/5, 2012 at 7:20 Comment(3)

working fine for me in IE8 - jsfiddle.net/uMD9h – Quondam 14/5, 2012 at 7:24

@Quondam nope, tried the link u sent in ie8 and it won't work – Dorcia 14/5, 2012 at 7:26

strange...it is working absolutely fine for me in IE8 with window XP. – Quondam 14/5, 2012 at 7:30

In Internet Explorer (up to at least IE8) clicking a radio button or checkbox to change its value does not actually trigger the onChange event until the the input loses focus.

Thus you need to somehow trigger the blur event yourself.. one suggestiong would be to have a function: as follows:

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

Now your onchange event should be triggered but as you can see it is redundant code thus you are better off just using the onclick event handler.

The better solution is to use a modern javascript library like jquery which handles all these quirks for you..

Umbilical answered 14/5, 2012 at 7:31 Comment(1)

i think onchange is designed for that ..until the control does not lose focus it means modification is still going on ... – Quondam 14/5, 2012 at 7:33

Technically, IE actually got this right. From the fine specification:

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.

So in order for a change event to be trigger, the specification says that the element must lose focus (i.e. a blur is required). The usual kludge is to use a click handler or force the blur as the others have suggested.

Dipsomaniac answered 14/5, 2012 at 7:32 Comment(0)

use onclick, but ie is call the event handler before the value (or checked attribute) was changed msdn

Awakening answered 14/5, 2012 at 7:24 Comment(2)

why onclick ?? onchange is appropriate for this . – Quondam 14/5, 2012 at 7:28

because change only fire when element lost focus in ie – Awakening 14/5, 2012 at 8:33

Recommended topics

Hot tags