/    Sign up×
Community /Pin to ProfileBookmark

Validating Radio buttons… argh.

Copy linkTweet thisAlerts:
Jan 10.2006

I have radio buttons on a page sharing the same ID…

I want a function like this:

function check(elementName){
for (x=0; x < elementName.size; x++){
//loop through the radio buttons to see if something is checked.
}
//if nothing was checked, return an error, otherwise don’t.
}

I want a function that reads in the ID of the radio buttons, does a loop based on how many radio buttons of that ID are on the page, loops through to check if something is checked…

Any help on accomplishing this?

dep

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoJan 10.2006 — This will do it.
function checkAll()
{
var inputs = document.getElementsByTagName('input');
var i;
var j=0;

for(i=0;i&lt;inputs.length;i++)
{
if((inputs[i].type == 'radio')&amp;&amp;inputs[i].checked)
j++;
}
if(j==0)
alert('You must choose an option!');
}
Copy linkTweet thisAlerts:
@depauthorJan 10.2006 — Good, but what if I had two different sets of radio buttons that needed to be evaluated separately? (I need to produce a specific error message).
Copy linkTweet thisAlerts:
@konithomimoJan 10.2006 — Then just give each set a different name:
&lt;form&gt;
&lt;INPUT TYPE=RADIO NAME="size" VALUE="S"&gt;small
&lt;INPUT TYPE=RADIO NAME="size" VALUE="M"&gt;medium
&lt;INPUT TYPE=RADIO NAME="size" VALUE="L"&gt;large
&lt;INPUT TYPE=RADIO NAME="plus" VALUE="XL"&gt;extra-large
&lt;INPUT TYPE=RADIO NAME="plus" VALUE="XXL"&gt;extra-extra-large
&lt;INPUT TYPE=RADIO NAME="plus" VALUE="XXL"&gt;extra-extra-extra-large
&lt;/form&gt;

Then just expand the function to check the name:
<i>
</i>function checkAll(inname)
{
var inputs = document.getElementsByTagName('input');
var i;
var j=0;

for(i=0;i&lt;inputs.length;i++)
{
if((inputs[i].type == 'radio')&amp;&amp;inputs[i].checked&amp;&amp;(inputs[i].name == inname))
j++;
}
if(j==0)
alert('You must choose an option!');
}


Now just send the function the name that you want it to check:

size or plus:

<input type="button" value="Send" onclick="checkAll('size')">

<input type="button" value="Send" onclick="checkAll('plus')">

Note- If you dont want to use then name then you could also give each group a class and then check the className.
Copy linkTweet thisAlerts:
@SelrachJan 10.2006 — Then check the id of the radio button set as well to make sure that you are evaluating that particular set.

<edit>

Eh, looks like it was answered

</edit>
Copy linkTweet thisAlerts:
@depauthorJan 10.2006 — ah, that'll work, i think. thanks!
Copy linkTweet thisAlerts:
@ExuroJan 10.2006 — I have radio buttons on a page sharing the same ID...[/QUOTE]
No two tag IDs in the same page should ever be the same. With radio buttons you set the [FONT=Courier New]name[/FONT] attribute to the same value to create a set. I'm not sure if you already knew this, or if that's what you meant... Anyway, if you don't use the [FONT=Courier New]name[/FONT] attribute correctly though, I don't think any server-side processing you do on the form will work correctly either.
×

Success!

Help @dep 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 5.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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