Radio Event Not Registered

MC

unread,

Jul 22, 2008, 10:51:32 AM7/22/08

to

Question,
Why does the following code register the event for input type button but not
radio? (And how do I make this happen?)
Thanks,
MC

<HTML>
<FORM name='x' action=''>
<input type='radio' name='rbTest' id='YES_1' value='1'>YES
<input type='radio' name='rbTest' id='NO_1' value='0'>NO
<input type='button' name='btnTest' id='btnTestid' value='test'>
</FORM>
<SCRIPT LANGUAGE="Javascript" type="text/javascript">
document.x.btnTest.onclick = doTest;
document.x.rbTest.onclick = doTest;
function doTest(e) {
alert('doTest');
}
</SCRIPT>
</HTML>

Henry

unread,

Jul 22, 2008, 12:01:22 PM7/22/08

to

On Jul 22, 3:51 pm, MC wrote:
> Question,
> Why does the following code register the event for input
> type button but not radio? (And how do I make this happen?)
> Thanks,
> MC
>
> <HTML>
> <FORM name='x' action=''>
> <input type='radio' name='rbTest' id='YES_1' value='1'>YES
> <input type='radio' name='rbTest' id='NO_1' value='0'>NO
> <input type='button' name='btnTest' id='btnTestid' value='test'>
> </FORM>
> <SCRIPT LANGUAGE="Javascript" type="text/javascript">
> document.x.btnTest.onclick = doTest;
> document.x.rbTest.onclick = doTest;

<snip>
If you have multiple like-named form controls (usually radio buttons)
then referencing them by name results in a collection of all of those
like-named controls. Setting an - onclick - property on a collection
object is probably harmless but is also not useful.

You would need to loop through the collection and assign the - onclick
- listener to each form control element in the collection in tern.

MC

unread,

Jul 22, 2008, 12:26:03 PM7/22/08

to

Question,
Why does the following code register the event for input type button but not
radio? (And how do I make this happen?)
Thanks,
MC

<HTML>
<FORM name='x' action=''>
<input type='radio' name='rbTest' id='YES_1' value='1'>YES
<input type='radio' name='rbTest' id='NO_1' value='0'>NO
<input type='button' name='btnTest' id='btnTestid' value='test'>
</FORM>
<SCRIPT LANGUAGE="Javascript" type="text/javascript">
document.x.btnTest.onclick = doTest;
document.x.rbTest.onclick = doTest;

MC

unread,

Jul 22, 2008, 2:06:44 PM7/22/08

to

Henry,
Thank you for pointing this out. Adding the following resolved the issue.
MC

function addRadioEvent(e) {
for (var i=0; i < e.length; i++) {
e[i].onclick = myEventClick;
}
}

Thomas 'PointedEars' Lahn

unread,

Jul 23, 2008, 1:49:49 PM7/23/08

to

Henry wrote:
> On Jul 22, 3:51 pm, MC wrote:
>> Question,
>> Why does the following code register the event for input
>> type button but not radio? (And how do I make this happen?)

>> [...]

>> <HTML>
>> <FORM name='x' action=''>
>> <input type='radio' name='rbTest' id='YES_1' value='1'>YES
>> <input type='radio' name='rbTest' id='NO_1' value='0'>NO
>> <input type='button' name='btnTest' id='btnTestid' value='test'>
>> </FORM>
>> <SCRIPT LANGUAGE="Javascript" type="text/javascript">
>> document.x.btnTest.onclick = doTest;
>> document.x.rbTest.onclick = doTest;

This is not Valid markup and so is not supposed to work in the first place.

> <snip>
> If you have multiple like-named form controls (usually radio buttons)
> then referencing them by name results in a collection of all of those
> like-named controls. Setting an - onclick - property on a collection
> object is probably harmless but is also not useful.
>
> You would need to loop through the collection and assign the - onclick
> - listener to each form control element in the collection in tern.

It suffices and is much more efficient to assign the `click' event listener
to the `form' element object or another common ancestor element object
instead, because the `click' event bubbles in all known DOMs:

function doTest()
{
// ...
}

and then

or

document.forms["x"].addEventListener("click", doTest, false);

or

document.forms["x"].onclick = doTest;

Note that the third approach is proprietary (for `onclick'). In contrast
to the second, standards-compliant approach, it requires some work if a
potential primary event listener is not to be replaced.

As obvious by the first approach, the `form' element does not need a name.

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee