Change handler for radio buttons

[Jeremy]

Given a group of radio buttons with the same "name" property, all with
onchange handlers set -- what should happen when the user selects a
different radio button than the one currently selected (assuming one is
currently selected)?

It seems to me that two radio buttons are changing - one is changing
from checked to unchecked, and the other changing from unchecked to
checked (since radio buttons with the same "name" attribute are
considered mutually exclusive). However, it seems to be the case that
only one change event is fired -- for the newly selected radio button.
The one that is no longer checked is not notified of such.

Technically, the W3 spec doesn't really deal with this case. It says:

The onchange event occurs when a control loses the input focus
and its value has been modified since gaining focus.[1]

In this case, technically at least, the *value* of the radio button is
not being changed - only whether or not it is checked (this is distinct
from value). If they are following this definition, though, then
*neither* event should be fired. Additionally, the event is fired (in
all but IE) when the button *gains* focus, not *loses* focus, which is
the opposite of the specified behavior.

All user agents that I tested (Moz, IE, Opera, Safari) seem to act in
roughly the same way. But I can't imagine why.

Any thoughts?

Test case:
http://duckwizard.com/clj/radio-onchange/

Reference:
[1] http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3

Jeremy

 

[RobG]

Given a group of radio buttons with the same "name" property, all with
onchange handlers set -- what should happen when the user selects a
different radio button than the one currently selected (assuming one is
currently selected)?

It seems to me that two radio buttons are changing - one is changing
from checked to unchecked, and the other changing from unchecked to
checked (since radio buttons with the same "name" attribute are
considered mutually exclusive). However, it seems to be the case that
only one change event is fired -- for the newly selected radio button.
The one that is no longer checked is not notified of such.

Technically, the W3 spec doesn't really deal with this case. It says:

The onchange event occurs when a control loses the input focus
and its value has been modified since gaining focus.[1]

In this case, technically at least, the *value* of the radio button is
not being changed - only whether or not it is checked (this is distinct
from value).

Below is a reference to suggest that whoever wrote the form part of
the HTML spec believes that turning a button on or off does change the
value.

An element whose value changes without getting and losing focus
(essentially without direct user interaction causing a focus and a
subsequent blur event) should not fire a change event, therefore if
the value changes as a consequence of some action not related to the
control itself, it shouldn't fire a change event.

This is consistent with what happens when you change the value using
script - no change event occurs as there was no focus and blur event
combination.

If they are following this definition, though, then
*neither* event should be fired. Additionally, the event is fired (in
all but IE) when the button *gains* focus, not *loses* focus, which is
the opposite of the specified behavior.

IE is strictly correct here (i.e. it behaves per the W3C spec) but it
results in utterly confusing behaviour. The W3C needs to revisit the
specification for intrinsic events and be much more specific about how
they work for different elements (which should to a large extent
simply document what currently occurs).

I think the writers of the spec tried to keep it simple, which is a
good strategy, but there are places where it just doesn't say enough.

All user agents that I tested (Moz, IE, Opera, Safari) seem to act in
roughly the same way. But I can't imagine why.

Any thoughts?

Test case:http://duckwizard.com/clj/radio-onchange/

Reference:
[1]http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3

Jeremy

In the section on forms, there is a bit on accesskey that says:

"When a user activates a radio button, the user agent changes the
value of the radio button"

<URL: http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey >

It may be more appropriate to consider that the value attribute in the
HTML provides the radio button element with a *defaultValue*, the
button's state (on or off) sets its actual value to the defaultValue
or some other value (let's say undefined) respectively.

Therefore when you change the button from checked to unchecked, you
are changing the value. And since only the button you clicked on does
the focus dance (well, the sensible dance, not the by-the-spec
thoroughly-confusing dance), only one change event gets fired.

This issue is usually easily fixed by using onclick with modified
logic to see if the button is checked or not (or which one of the set
is checked).

 

[Ed]

Given a group of radio buttons with the same "name" property, all with
onchange handlers set -- what should happen when the user selects a
different radio button than the one currently selected (assuming one is
currently selected)?

It seems to me that two radio buttons are changing - one is changing
from checked to unchecked, and the other changing from unchecked to
checked (since radio buttons with the same "name" attribute are
considered mutually exclusive).  However, it seems to be the case that
only one change event is fired -- for the newly selected radio button.
The one that is no longer checked is not notified of such.

I think this is the bug recorded here:

https://bugzilla.mozilla.org/show_bug.cgi?id=363693