PDA

View Full Version : Validate multiple radio buttons

ashleypower
03-02-2003, 10:56 PM
Hi, i'm new here and I need help.
I need a script that checks to see if all radio button choices are checked or not. Each question has a yes or no answer, I just need to know if all questions are answered. Here's the source:

<HTML>

<HEAD>
<TITLE>TEST</TITLE>

<SCRIPT language = JavaScript>

<!--

if (window.focus) self.focus();

function addyes() {

var totals=[0,0,0,0,0,0];
var numquestions=18;

for(i=0;i<numquestions;i++)
if(eval("document.quiz.Q" + (i+1) + "[0].checked") )
totals[i%6]++;

for(i=0; i<6; i++)
eval("document.quiz." + String.fromCharCode(97+i) + ".value=totals[" + i + "];");
}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME = "quiz">

<TABLE CELLSPACING = "10">

<TR>
<TD>1(A). One</TD>
<TD><INPUT TYPE = "radio" NAME="Q1" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q1" VALUE = "no">No</TD>
</TR>

<TR>
<TD>2(B). Two</TD>
<TD><INPUT TYPE = "radio" NAME="Q2" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q2" VALUE = "no">No</TD>
</TR>

<TR>
<TD>3(C). Three</TD>
<TD><INPUT TYPE = "radio" NAME="Q3" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q3" VALUE = "no">No</TD>
</TR>

<TR>
<TD>4(D). Four</TD>
<TD><INPUT TYPE = "radio" NAME="Q4" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q4" VALUE = "no">No</TD>
</TR>

<TR>
<TD>5(E). Five</TD>
<TD><INPUT TYPE = "radio" NAME="Q5" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q5" VALUE = "no">No</TD>
</TR>

<TR>
<TD>6(F). Six</TD>
<TD><INPUT TYPE = "radio" NAME="Q6" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q6" VALUE = "no">No</TD>
</TR>

<TR>
<TD>7(A). Seven</TD>
<TD><INPUT TYPE = "radio" NAME="Q7" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q7" VALUE = "no">No</TD>
</TR>

<TR>
<TD>8(B). Eight</TD>
<TD><INPUT TYPE = "radio" NAME="Q8" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q8" VALUE = "no">No</TD>
</TR>

<TR>
<TD>9(C). Nine</TD>
<TD><INPUT TYPE = "radio" NAME="Q9" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q9" VALUE = "no">No</TD>
</TR>

<TR>
<TD>10(D). Ten</TD>
<TD><INPUT TYPE = "radio" NAME="Q10" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q10" VALUE = "no">No</TD>
</TR>

<TR>
<TD>11(E). Eleven</TD>
<TD><INPUT TYPE = "radio" NAME="Q11" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q11" VALUE = "no">No</TD>
</TR>

<TR>
<TD>12(F). Twelve</TD>
<TD><INPUT TYPE = "radio" NAME="Q12" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q12" VALUE = "no">No</TD>
</TR>

<TR>
<TD>13(A). Thirteen</TD>
<TD><INPUT TYPE = "radio" NAME="Q13" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q13" VALUE = "no">No</TD>
</TR>

<TR>
<TD>14(B). Fourteen</TD>
<TD><INPUT TYPE = "radio" NAME="Q14" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q14" VALUE = "no">No</TD>
</TR>

<TR>
<TD>15(C). Fifteen</TD>
<TD><INPUT TYPE = "radio" NAME="Q15" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q15" VALUE = "no">No</TD>
</TR>

<TR>
<TD>16(D). Sixteen</TD>
<TD><INPUT TYPE = "radio" NAME="Q16" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q16" VALUE = "no">No</TD>
</TR>

<TR>
<TD>17(E). Seventeen</TD>
<TD><INPUT TYPE = "radio" NAME="Q17" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q17" VALUE = "no">No</TD>
</TR>

<TR>
<TD>18(F). Eighteen</TD>
<TD><INPUT TYPE = "radio" NAME="Q18" VALUE = "yes">Yes
<INPUT TYPE = "radio" NAME="Q18" VALUE = "no">No</TD>
</TR>


</TABLE>

<INPUT onclick = "addyes()" TYPE = button VALUE = "Calculate">
<INPUT TYPE = reset VALUE = "Clear"></B>

<P>

Sum of YES A = <INPUT SIZE = "3" NAME = "a" VALUE=0>
<P>
Sum of YES B = <INPUT SIZE = "3" NAME = "b" VALUE=0>
<P>
Sum of YES C = <INPUT SIZE = "3" NAME = "c" VALUE=0>
<P>
Sum of YES D = <INPUT SIZE = "3" NAME = "d" VALUE=0>
<P>
Sum of YES E = <INPUT SIZE = "3" NAME = "e" VALUE=0>
<P>
Sum of YES F = <INPUT SIZE = "3" NAME = "f" VALUE=0>
</FORM>

</BODY>

</HTML>

Any help would REALLY be appreciated!

Ashley Power
glenngv
03-03-2003, 12:56 AM
for (var i=1;i<=18;i++){
if (document.quiz.elements['Q'+i].checked){
//checked;
}
}
ashleypower
03-03-2003, 03:51 AM
Sorry, but i'm a little confused, i'm so bad at this JavaScript. Maybe I was a little vague also. What i'm looking for is that before the information can be submitted (clicking on the "Calculate" button) an alert box pops up letting the user know that they have not answered all of the questions. If they have answered all of the questions, then it moves on to the next page. Please help! Haha! Also, where does this code go???
glenngv
03-03-2003, 06:02 AM
you should have been clearer on your first post. This is actually what I did in my first answer. Just changed my mind when I saw your for loop in addyes() function.


function validateRadios(){
for (var i=1;i<=18;i++){
if (document.quiz.elements['Q'+i].checked){
alert("Please answer question #"+i+".");
return false;
}
}
return true;
}

function addyes() {
if (!validateRadios()) return;
var totals=[0,0,0,0,0,0];
var numquestions=18;
...
}
ashleypower
03-03-2003, 05:53 PM
Thanks for your help, I really appreciate it, but it doesn't work!

Thanks anyways!
arnyinc
03-03-2003, 06:36 PM
You can be really lazy and just set a radio button to "checked" so that there's no way a user can skip checking a box.

<input type="radio" name="q1" value="yes" checked>
<input type="radio" name="q1" value="no">
ashleypower
03-03-2003, 06:39 PM
HAHA! That's cool, I like it. I didn't know you could do that. Thanks for the tip!

Sorry everybody, if I seem dumb! I'm real new to this, and i'm hoping that I can learn it like this!
arnyinc
03-03-2003, 06:47 PM
No problem. Depending on what the radio buttons are for, people might think you're intentionally skewing the results if you have them all marked yes or no by default. That's rarely a problem, but something to keep in mind.

As long as you have this solution, it's still worth working on understanding the quirks of radio, checkbox, and listbox elements. I still have to look at code samples and tutorials every time I want to do something with them. It takes me too long. :)
glenngv
03-04-2003, 12:59 AM
sorry for the typo error, i thought i have already edited this line:

if (document.quiz.elements['Q'+i].checked){

it should have been:

if (!document.quiz.elements['Q'+i].checked){
ashleypower
03-04-2003, 12:32 PM
Thanks, but still doesn't work. An alert "Please answer question #1" always pops up, no matter how many questions are answered of if they're all answered! It's ok tho!
glenngv
03-05-2003, 02:54 AM
can you post the whole code again?
ashleypower
03-05-2003, 12:08 PM
I have it working now. Here it is, it lets me know when ANY question is unanswered:

function check() {

var iNumQuestions = 18;

for (var i = 1; i <= iNumQuestions; i++) {

var bOneChecked = false;
var aRadios = document.getElementsByName('Q' + i);

for (var j = 0; j < aRadios.length; j++) {

if (aRadios[j].checked) bOneChecked = true;
}

if (!bOneChecked) return false;
}

return true;
}

Thanks for your time and help!