PDA

View Full Version : Multiple Radio Button Validation

revolver_ocelot
07-08-2009, 09:22 AM
Hey Everyone

I have a page which is a simple questionnaire. Each question can only have one answer so I've used radio buttons. Before the user can proceed They must have selected one answer from each question. Can anyone show me how to validate all of the groups of radio buttons on the page?

Here's my basic code:

<html>
<head>
</head>

<body>

<div id="mainBody">
<h3>Physics Questions</h3><br />

<form action="" method="post" onsubmit="checkForm(this)">

<div id="questions">
Part 1 Questions<br /><br />

1: What does mass mean?<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="correct" />The amount of matter contained in an object<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="wrong" />The amount of water in an object<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="wrong" />The way gravity effects light<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="wrong" />The amount of light sent by the sun<br />
<br />

2: Where does gravity come from?<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="wrong" />The Ground<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="correct" />Gravitational pull is a force applied to an object as a result of another mass<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="wrong" />The way gravity effects light<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="wrong" />The amount of light sent by the sun<br />
<br />

</div>

<div align="right"><button type="button" id="nextButton" onclick="forward()">Next</button></div>
</form>

</div>

</body>
</html>


Thanks for any help you can give me
BonRouge
07-08-2009, 12:51 PM
I'm not sure what the 'next' button is there for and you have some problems (like multiple spaces instead of using CSS), but this might help you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript">
function getCheckedValue(radioObj) {
if(!radioObj) {
return "";
}
var radioLength = radioObj.length;
if(radioLength == undefined) {
if(radioObj.checked) {
return radioObj.value;
}
else {
return "";
}
}
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
function checkForm(oform) {
var len=2; // number of Qs goes here
for(j=1; j<len+1; j++) {
var nam="phyQ"+j;
var radiov=document.getElementsByName(nam);
var cValue=getCheckedValue(radiov);
if (cValue=="") {
var ng=true;
}
}
if (ng) {
alert("Please answer all the questions.");
return false;
}
else {
oform.submit();
}
}
</script>
</head>

<body>

<div id="mainBody">
<h3>Physics Questions</h3><br />

<form action="#" method="post" id="theform">

<div id="questions">
Part 1 Questions<br /><br />

1: What does mass mean?<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="correct" />The amount of matter contained in an object<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="wrong" />The amount of water in an object<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="wrong" />The way gravity effects light<br />
&nbsp; &nbsp;<input type="radio" name="phyQ1" value="wrong" />The amount of light sent by the sun<br />
<br />

2: Where does gravity come from?<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="wrong" />The Ground<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="correct" />Gravitational pull is a force applied to an object as a result of another mass<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="wrong" />The way gravity effects light<br />
&nbsp; &nbsp;<input type="radio" name="phyQ2" value="wrong" />The amount of light sent by the sun<br />
<br />

</div>

<div align="right"><button type="button" id="nextButton" onclick="forward()">Next</button></div>
<input type="submit" onclick="checkForm(document.getElementById('theform')); return false" />
</form>

</div>

</body>
</html>