validate radio buttons

[habib]

Hello PPl,

I want to use radio buttons on a mini questionnaire, the user has to check "yes" for all 3 questions in order for them to go to the next page.

Here is my code that I have done so far.... (but I'm not sure how to check the radio buttons have been selected and checked value for all of them are "yes")

<form name="confirmed" action="" method="post">
<li> Q1 Is hair color black? </li>
Yes<input type="radio" name="haircolor" value="1">
No<input type="radio" name="haircolor" value="0" checked>

<li> Q1 Is eye color brown? </li>
Yes<input type="radio" name="eyecolor" value="1">
No<input type="radio" name="eyecolor" value="0" checked>

<li> Q1 Is skin color brown? </li>
Yes<input type="radio" name="skincolor" value="1">
No<input type="radio" name="skincolor" value="0" checked>

<img src="images/submit.gif" border="0" alt="Continue" onClick="next();">

<script>
function next() {
with(document.confirmed) {
location.href="page2.htm" }
}
</script>
</form>

[cheesebagpipe]

function next(oForm) {
return (oForm.haircolor[0].checked && oForm.eyecolor[0].checked && oForm.skincolor[0].checked);
}

<form name="confirmed" action="page2.htm" method="post">
.........
.........
<input type="image" src="images/submit.gif" border="0" alt="Continue" onclick="return next(this.form)">

[habib]

Hi cheesebagpipe,

Thanks for the help, I am not very good with Javascript, but I now get the error of "haircolor is null or not an object". What does this error mean?

Habib

[cheesebagpipe]

Did you put this:

<input type="image" src="images/submit.gif" border="0" alt="Continue" onclick="return next(this.form)">

...inside the form? (<form>.........</form>). If so, it's a form element, and should work properly. Make sure there are no typos as well, like "hairColor" or the like.

[habib]

Hi Cheesebagpipe,

Yep, it was a typo, i had typed in <img src... blah blah > instead of <input type...... >

This works fine, but the problem now is that if anyone of the 3 radio's are checked it submits the form.

What i want to achieve is if all 3 radio's are checked then it submits form.

Also how do i add an alert in? I want to be able to display error messages if any of the radio buttons are not checked. I know how to create the message alert(my message goes here"); but i'm not sure how to use this in validating the radios.

Am i talking any sense...?

[habib]

ok, its working now. This is what I did:

<form name="confirmed" action="amount.php" method="POST">
<li> Q1 Is hair color black? </li>
Yes<input type="radio" name="haircolor" value="1">
No<input type="radio" name="haircolor" value="0" checked>

<li> Q1 Is eye color brown? </li>
Yes<input type="radio" name="eyecolor" value="1">
No<input type="radio" name="eyecolor" value="0" checked>

<li> Q1 Is skin color brown? </li>
Yes<input type="radio" name="skincolor" value="1">
No<input type="radio" name="skincolor" value="0" checked>

<img src="images/submit.gif" border="0" alt="Continue" onClick="return next(this.form);">

<script>
function next() {
if (confirmed.haircolor[0].checked=="1" && confirmed.eyecolor[0].checked=="1" && confirmed.skincolor[0].checked=="1") {
location.href="/page2.htm"; }
else {
if (confirmed.haircolor[0].checked=="0") {
alert ("You must have black hair"); }
if (confirmed.eyecolor[0].checked=="0") {
alert ("Your eye color must be brown"); }
if (confirmed.skincolor[0].checked=="0") {
alert ("Your skin color must be brown"); }
}
}
</script>
</form>

Thank you everyone for helping me and pointing me in the right direction.