Radio Event Not Registered

MC · Jul 22, 2008

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 · Jul 22, 2008

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 · Jul 22, 2008

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.onclick = myEventClick;
}
}

Thomas 'PointedEars' Lahn · Jul 23, 2008

Henry said:
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;

Click to expand...

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

<form ... onclick="doTest()">
...
</form>

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

Javascrip code wont run properly.	2	Oct 2, 2022
Check forms With JavaScript	1	Mar 28, 2023
I dont get this. Please help me!!	2	Jan 24, 2023
Very Basic CC Validation Javascript	0	Oct 29, 2019
Help with code	0	Jun 12, 2022
Can not catch the error thrown by the top window in IE???	0	Aug 29, 2007
Positioning CSS components	1	Nov 16, 2023
"input-group-text" help	7	Aug 10, 2023

Radio Event Not Registered

MC

Henry

MC

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads