/    Sign up×
Community /Pin to ProfileBookmark

radio.length problem

Copy linkTweet thisAlerts:
Oct 17.2007

I’m modifying a form. The form has a field which originally had two possible values set by a pair of radio buttons. I have added three more radio buttons for a total of five. All buttons have the same name and the following values “m, f, a, b, c.”

The validation script is

[CODE]function check_radio(field_name, message) {
var isChecked = false;

if (form.elements[field_name] && (form.elements[field_name].type != “hidden”)) {
var radio = form.elements[field_name];

for (var i=0; i<radio.length; i++) {
if (radio[i].checked == true) {
isChecked = true;
break;
}
}

if (isChecked == false) {
error_message = error_message + “* ” + message + “n”;
error = true;
}
}
}[/CODE]

The problem is that the error message is thrown if any of the three new radio buttons is checked; only checking one of the original two buttons evaluates to a button being checked.

I assume the radio.length property should automatically increase with the additional buttons, but that does not seem to be happening.

Am I missing something?

1) How can I have the page display the radio.length property so I can confirm my suspicions?

2) If it is seeing only two buttons, how can I fix it?

TIA

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorOct 17.2007 — can we see the HTML (the radio buttons)?
Copy linkTweet thisAlerts:
@webguy262authorOct 17.2007 — the page itself is PHP. here is that code, followed by the html it generates (the field is called 'gender' and the original values were 'm' & 'f', but I'm adapting it to hold a few salutation options)

[CODE]<?php echo tep_draw_radio_field('gender', 'm') . '&nbsp;&nbsp;Mr.&nbsp;&nbsp;' . tep_draw_radio_field('gender', 'f') . '&nbsp;&nbsp;Mrs.&nbsp;' . tep_draw_radio_field('gender', 'a') . '&nbsp;&nbsp;Ms.&nbsp;&nbsp;' . tep_draw_radio_field('gender', 'b') . '&nbsp;&nbsp;Dr.&nbsp;&nbsp;' . tep_draw_radio_field('gender', 'c') . '&nbsp;&nbsp;Prof.&nbsp;&nbsp;' . (tep_not_null(ENTRY_GENDER_TEXT) ? '<span class="inputRequirement">' . ENTRY_GENDER_TEXT . '</span>': ''); ?>[/CODE]

[CODE]<input type="radio" name="gender" value="m">&nbsp;&nbsp;Mr.&nbsp;&nbsp;<input type="radio" name="gender" value="f">&nbsp;&nbsp;Mrs.&nbsp;<input type="radio" name="gender" value="a">&nbsp;&nbsp;Ms.&nbsp;&nbsp;<input type="radio" name="gender" value="b" CHECKED>&nbsp;&nbsp;Dr.&nbsp;&nbsp;<input type="radio" name="gender" value="c">&nbsp;&nbsp;Prof.&nbsp;&nbsp;<span class="inputRequirement">*</span>[/CODE]

Even though there is a checked for value 'b' it errors.
Copy linkTweet thisAlerts:
@mrhooOct 17.2007 — [B]var radio = document.getElementsByName(field_name);[/B]
Copy linkTweet thisAlerts:
@KorOct 17.2007 — Maybe you have an XHTML DTD

Try:

<input type="radio" name="gender" value="b" [B]checked="checked"[/B]>
Copy linkTweet thisAlerts:
@KorOct 17.2007 — and...

if(radio.checked){

...

}
Copy linkTweet thisAlerts:
@UltimaterOct 17.2007 — From your first post I would have assumed that you were creating the three new elements with innerHTML hence an issue in IE. However since you hard coded them in with the other two elements the problem is obviously elsewhere. The very fact that it reacts to the first two elements as apposed to just the first element tells you that the NodeList is created successfully. All I can tell you is you may have misspelled "gender" on the three new elements and somehow got stuck with a cached page with the three elements misspelled or failed to add them to the same <form> or you may have been editing the wrong page altogether and got left with a past coding. If they are named correctly you should only be able to check one of the five radios at a given time so double check that.

To answer your question as to the radio length, try this for show:
<i>
</i>function check_radio(field_name, message) {
if(field_name!="gender")return;
var radio = form.elements[field_name];
alert(radio.length)
}
Copy linkTweet thisAlerts:
@webguy262authorOct 17.2007 — All five buttons work as expected... only one can be selected at a time.

I can't get the alert to work.
Copy linkTweet thisAlerts:
@toicontienOct 17.2007 — What does:

alert(form.elements["gender"].length);

Get you?

is [B]form[/B] a global variable? It's not defined in the check_radio function.
×

Success!

Help @webguy262 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.16,
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,
)...