Looping Radio buttons with validation

**JscrptBeginner** · 04-19-2009 09:03 PM

Reposted this as I am still awaiting a response to my question

Initial Post
--------------------------------------------------------------------------------

Here is my problem. Basically I am designing a quiz that validates each input as per what the user chooses and will not let them proceed without answering all questions correctly. At the moment I can do this for one question using name, however when I have multiple questions (I tried changing my script to validate by id) it only validates the first one, whichever is clicked first. At the moment I am validating onclick for ease of testing however the final quiz will validate onsubmit. Here is my code it would be great if anyone can tell my how I can get it to validate all questions (there will be more)

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">

function checkAnswers()
{
var retval = false;
for(i=0;i<document.multichoice.question.length;i++)
{
if(document.multichoice.question[i].value == "yes" && document.multichoice.question[i].checked == true)
{
retval = true;
break;
}
}
if(retval == false)
alert("That is the wrong answer");
return retval;
}

// End -->

</SCRIPT>
</head>

<body>

<FORM name="multichoice" action='./emlmc.php' method='post' onClick= "return checkAnswers()" >

<center>

<br><br>

<b>1</b>

<br><br>

<div>
<center>a)<input type="radio" value="yes" name="qu1" id="question">1 </center>
</div>

<div>
<center>b)<input type="radio" value="no" name="qu1" id="question">2 </center>
</div>
<div>
<center>c)<input type="radio" value="no" name="qu1" id="question">3 </center>
</div>
<div>
<center>d)<input type="radio" value="no" name="qu1" id="question">4</center>
</div>

<br><br>

<b>2</b>

<br><br>

<div>
<center>a)<input type="radio" value="no" name="qu2" id="question">1 </center>
</div>

<div>
<center>b)<input type="radio" value="no" name="qu2" id="question">2</center>
</div>
<div>
<center>c)<input type="radio" value="no" name="qu2" id="question">3 </center>
</div>
<div>
<center>d)<input type="radio" value="yes" name="qu2" id="question">4</center>
</div>

<input type="submit" name='submit' value="Submit">  <input type='reset' name='reset' value='Clear Form'>

</center>

</FORM>

</body>
</html>

and my original for one question using name

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">

function checkAnswers()
{
var retval = false;
for(i=0;i<document.multichoice.question.length;i++)
{
if(document.multichoice.question[i].value == "yes" && document.multichoice.question[i].checked == true)
{
retval = true;
break;
}
}
if(retval == false)
alert("That is the wrong answer");
return retval;
}

// End -->

</SCRIPT>
</head>

<body>

<FORM name="multichoice" action='./emlmc.php' method='post' onClick= "return checkAnswers()" >

<center>

<br><br>

<b>1</b>

<br><br>

<div>
<center>a)<input type="radio" value="yes" name="question">1 </center>
</div>

<div>
<center>b)<input type="radio" value="no" name="question">2 </center>
</div>
<div>
<center>c)<input type="radio" value="no" name="question">3 </center>
</div>
<div>
<center>d)<input type="radio" value="no" name="question">4</center>
</div>

<br><br>

<input type="submit" name='submit' value="Submit">  <input type='reset' name='reset' value='Clear Form'>

</center>

</FORM>

</body>
</html>

Thanks for any help you can give

Resonse 1
#2 04-16-2009, 12:18 PM
WolfShade
Registered User Join Date: Dec 2002
Location: CHICAGO, baby!

Posts: 283

The id is for CSS, primarily; javascript uses name.

Code:
for(i=0;i<document.multichoice.qu1.length;i++) {
... blah blah blah..
}
for(i=0;i<document.multichoice.qu2.length;i++) {
... blah blah blah..
}
etc..^_^

Respinse back from me
#3 04-16-2009, 12:24 PM
JscrptBeginner
Registered User Join Date: Apr 2009
Posts: 7

thanks for reply

--------------------------------------------------------------------------------

Thanks for the reply Wolfshade

I thought about that way but thought there must be an easier better code solution, say for example I had 300 questions then that is alot of repetitive code, so was trying to work out a way way to put it in a loop

Thanks

Response 2
#4 04-17-2009, 03:53 AM
WolfShade
Registered User Join Date: Dec 2002
Location: CHICAGO, baby!

Posts: 283

Not the greatest idea, but you could nest the FOR loops as long as all the radio button names keep the same designation format ("qu plus number").

Code:
for(i=1; i<[number of questions]; i++) { //Since the names start with 1, use 1-based index instead of 0-based as it would normally be for this kind of array
for (j=1; j<document.multichoice.qu[j].length; j++) {
.. blah blah blah ..
}
}^_^

My second response to responses
#5 04-17-2009, 10:43 AM
JscrptBeginner
Registered User Join Date: Apr 2009
Posts: 7

Thats it I think but can't get code to work

--------------------------------------------------------------------------------

Thanks Wolfshade that is what I was looking for but I can't get it to work hopefully someone can tell me why my code is not working. Thanks again

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">

function checkAnswers()
{
var retval = false;

for(i=1; i<[2]; i++) {

for(j=1;j<document.multichoice.question[j].length;j++)
{
if(document.multichoice.question[j].value == "yes" && document.multichoice.question[j].checked == true)
{
retval = true;
break;
}
}
}
if(retval == false)
alert("That is the wrong answer");
return retval;
}

// End -->

</SCRIPT>
</head>

<body>

<FORM name="multichoice" action='./emlmc.php' method='post' onClick= "return checkAnswers()" >

<center>

<br><br>

<b>1</b>

<br><br>

<div>
<center>a)<input type="radio" value="yes" name="question1">1 </center>
</div>

<div>
<center>b)<input type="radio" value="no" name="question1">2 </center>
</div>
<div>
<center>c)<input type="radio" value="no" name="question1">3 </center>
</div>
<div>
<center>d)<input type="radio" value="no" name="question1">4</center>
</div>

<br><br>

<b>2</b>

<br><br>

<div>
<center>a)<input type="radio" value="no" name=""question2">1 </center>
</div>

<div>
<center>b)<input type="radio" value="no" name="question2">2</center>
</div>
<div>
<center>c)<input type="radio" value="no" name="question2">3 </center>
</div>
<div>
<center>d)<input type="radio" value="yes" name="question2">4</center>
</div>

<input type="submit" name='submit' value="Submit">  <input type='reset' name='reset' value='Clear Form'>

</center>

</FORM>

</body>
</html>

**JMRKER** · 04-19-2009 10:30 PM

See post #6 of http://www.webdeveloper.com/forum/sh....php?t=2071066
for an alternate solution. See how the validation sections for radio buttons and select boxes was handled as well as single and multiple checkbox clicks.

Should be modifiable for a lot of questions, but 300 on one quiz would sure be a bummer to take, especially on-line!

Post back if you have implementation questions.

**JscrptBeginner** · 04-19-2009 11:37 PM

Thanks JMRKER, unfortunately that link doesn't seem to work and I can't seem to find that thread by the number. However I actually reposted this thread again here http://www.webdeveloper.com/forum/sh...478#post999478 as I didnt seem to be getting any responses.

As you can see in this other thread I received a response from ZeroKilled that seems to work well. Let me know if this is different from your solution as I would like to learn if there is a better way.

Thanks

**ZeroKilled** · 04-19-2009 11:47 PM

i guess s/he meant the following link, probably accidentally typed an extra '6' at the end.
http://www.webdeveloper.com/forum/sh...d.php?t=207106

**JscrptBeginner** · 04-20-2009 12:49 AM

Yep found it now, thanks to both of you ZeroKilled and JMRKR both solutions work great in different ways, now I just need to decide which way is better on submit or on click. Happy days, thanks again

**JscrptBeginner** · 04-20-2009 12:50 AM

Yep found it now, thanks to both of you ZeroKilled and JMRKER both solutions work great in different ways, now I just need to decide which way is better on submit or on click. Happy days, thanks again

**JMRKER** · 04-20-2009 08:52 AM

Originally Posted by ZeroKilled

i guess s/he meant the following link, probably accidentally typed an extra '6' at the end.
http://www.webdeveloper.com/forum/sh...d.php?t=207106

Yep, that was it. Guess my lighting fast fingers got away from me again!

Thanks for the correction ...

Thread: Looping Radio buttons with validation

Thread Tools

Display

Looping Radio buttons with validation

Something else to consider ...

Link Broken

Sorted4sure

Sorted4sure

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions