/    Sign up×
Community /Pin to ProfileBookmark

element access problem when only a single radio button defined

Copy linkTweet thisAlerts:
Jun 19.2008

hi, could anyone help me to understand why below function doesnt reach [I]alert(‘success!’);[/I] line when there’s only one radio element defined?

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Radion Test</title>
<script language=”javascript” type=”text/javascript”>
function radio_test()
{
for (i = 0; i < window.self.document.forms[‘dummy’].elements[‘single’].length; i++){
alert(‘success!’);
}
}
</script>
</head>
<body>
<form name=”dummy” action=”javascript:void(null);”>
<input type=”radio” name=”single”>
<input type=”submit” value=”submit” onClick=”javascript: radio_test(); return false;”>
</form>
</body>
</html>[/CODE]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooJun 20.2008 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Radion Test</title>
<script language="javascript" type="text/javascript">
function radio_test(){

var str= "1. document.forms['dummy'].elements['single'].length=nt"+
document.forms.dummy.elements.single.length+
"nn2. document.forms['dummy'].elements['single'].type=nt"+
document.forms.dummy.elements.single.type+
"nn3. document.getElementsByName('single').length=nt"+
document.getElementsByName('single').length+
"nn4. document.getElementsByName('single')[0].type=nt"+
document.getElementsByName('single')[0].type;
alert(str);

return false;
}
onload=function(){
document.getElementsByName('submit')[0].onclick=radio_test;
}
</script>
</head>
<body>
<form name="dummy" action="" onsubmit= "return false">
<fieldset><input type="radio" name="single" >
<input type="submit" value="submit" name="submit">
</fieldset>
</form>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@zdziebloauthorJun 20.2008 — still doesnt make sense why [I]document.forms.dummy.elements.single.length[/I] returns undefined instead of 1 but... i understand that i need to use [I]getElementsByName[/I] now

thank you for your help
Copy linkTweet thisAlerts:
@KorJun 20.2008 — It does make sense. When you have a single radio button, the classical reference return, logically, a single element, not a collection. A single element has no length property. For instance, give a textbox a name, than try to find its length property. You will get undefined, logically. Same with a single radio button.

DOM method getElementsByName() returns [I]always[/I] a collection, thus this is the reason for DOM method works, classical form's elements reference don't.
Copy linkTweet thisAlerts:
@zdziebloauthorJun 20.2008 — why then [I]getElementsByName[/I] does return length for a single element?
Copy linkTweet thisAlerts:
@KorJun 20.2008 — once again: [B]getElementsByName() [/B]returns always a [I]collection[/I], thus it has always a length property, very much alike an array. Now if you have a single element with a certain name refered by getElementsByName() it is the same as you would have an array with a single element.

This is the reason for you [I]need always an index[/I] when using getElementsByName() to refer a certain element.

Classical reference
<i>
</i>document.formname.elementname

is ambiguous. It returns a collection if there are more than one element, but it returns the element itself when there is no other element with the same name.
Copy linkTweet thisAlerts:
@zdziebloauthorJun 20.2008 — haven't seen that line about DOM before.. got ya now! so basically it's safer to use [B]getElementsByName()[/B] if the number of form elements varies. thanks!
×

Success!

Help @zdzieblo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...