Radio buttons not working with validator

radio buttons don't work with validator

[rbatta1]

Hi everyone. I'm putting together a giant form that kind of uses simple JS with ID's rather than document.nnn.nnn.... Except when I put in the code to check my radio buttons, on the actual page (not source), i can't click the radio buttons! Ugh! According to a few sites, the JS seems to be correct, and it works for other people, but for some reason it doesn't work for mine...

Here's the simplified version of the script.

function Validate()
{
var msg = "";
if (team.value == "" ¦¦ team.value == "Your Team" ) msg += "team\n";
if (!stdnumber[0].checked &&!stdnumber[2].checked ) msg += "standard number\n";
if ( msg!= "" )
{
alert("Forgot to fill out:\n" + msg);
}
else
{
alert("Thank you")
}
}

and here's part of the actual html

3. - Standard number of people? 
<BR>
<input type="radio" ID="stdnumber" value="yes">Yes
<br>
<input type="radio" ID="stdnumber" value="no">No

As you can see from the first part, I'm accumulating if statements to tag onto my 1 giant alert box. i've noticed a lot of people using the for...loop but i don't really understand it, and ideally I'd like to stick to the above format. changing the format so that it reads slightly differently also makes my radio buttons stop working (as seen below):
( (stdnumber[0].checked!= true) && (stdnumber[1].chcked!= true) )

I'm still kind of learning JS, but this has really stumped me. The above works perfectly as checkboxes, but I'd like them to be radio buttons.

If anyone could help, that would be GREATLY appreciated! :)

thanks!

[rocknbil]

Welcome aboard!

A couple things here, probably due to your simplifying, :-) but will point them out nonetheless:

if (team.value == "" ¦¦ team.value == "Your Team" ) msg += "team\n";
if (!stdnumber[0].checked &&!stdnumber[2].checked )

Not seeing where you assign the doc objects to the variable/array team and stdnumber, but assuming you got that ok.

Here's where your validation issues arise. You're going to holler a big "DOH!" :-)

<input type="radio" ID="stdnumber" value="yes">Yes
<input type="radio" ID="stdnumber" value="no">No

ID's need to be unique. But there's a second problem: when you submit this, you need a name parameter to be read by your script. So a good solution for ID'ing radios is to use the value for the ID, or append the value to the name:

<input type="radio" name="stdnumber" id="stdnumber-yes" value="yes"> Yes
<input type="radio" name="stdnumber" id="stdnumber-no" value="no"> No

[rbatta1]

Well, when it involves checkboxes, the ID tag works (if the ID = stdnumber, then!stdnumber[0].checkbox etc etc works). but with radio buttons it doesnt. they both are pretty much the same thing, afterall, it's in a semi-array. if I have a name="", the entire thing gets thrown off. (all h3ll breaks loose! and i get an error returned...) again, i'm trying to get away from using the document.nnn.nnn.~ format by using the ID's to simplify my JS.

I'm not sure if I had mentioned it before, but I also am not using the form field as it keeps resetting my form (urgh). that also explains why i dont have name="blah" values in any part of my form.

if all else fails, I'll just turn those radio buttons to checkboxes.

thanks for any help you guys can give me! :D

[rocknbil]

Well, complete code is probably best so someone can help you. It's my guess all hell is breaking loose because you're using ambiguous references to the objects, - by this I mean mixing ID's and names, and just using the object name or id and hoping JS finds it. In most cases, radio arrays being an exception, you can use the same id and name for an object. You can eliminate all doubt by using one of two methods to reference your objects.

a) restrict your reference to the object to document.getElementById('objectname') (named objects are deprecated for client-side references,)

var obj = document.getElementById('objectname');

or

b) use the this keyword to pass the specific object,

<input type="checkbox" name="somename" id="somename" value="somevalue" onclick="whatever(this);">

function whatever (obj) { alert(obj.value + ' ' + obj.checked); }

Using your example,

<input type="radio" name="stdnumber" id=stdnumber-yes" value="yes">Yes
<input type="radio" name="stdnumber" id=stdnumber-no" value="no">No

function Validate()
{
var msg = "";
var y = document.getElementById('stdnumber\-yes');
var n = document.getElementById('stdnumber\-no');
if (team.value == "" ¦¦ team.value == "Your Team" ) msg += "team\n";
if (!y.checked &&!n[2].checked) msg += "standard number\n";

if ( msg!= "" )
{
alert("Forgot to fill out:\n" + msg);
}
else
{
alert("Thank you")
}
}

[rocknbil]

oops sorry, was sleepy -
if (!y.checked &&!n[2].checked) msg += "standard number\n";
should be
if (!y.checked &&!n.checked) msg += "standard number\n";

[rbatta1]

Thanks rocknbil. I think you crossed my level of understanding javascript..... Haha (I am sort of still a beginner so I still don't understand all the terms.) I do know that there aren't any overlaps in code, except for the radio buttons and checkboxes, but those are differenciated with the [0], [1],... designations.

For simplicity's sake (for me..) I'm just going to change all the radio buttons to checkboxes. At least I know those definitely work with my JS.

Thanks again for your help!