PDA

View Full Version : survey form validation problem.



coolgod
11-24-2009, 10:48 PM
can anyone help me validate a survey page i have?
it has many questions and each question has 5 radio buttons.
i followed many guides and none of them worked for me.
I refered to http://www.dynamicdrive.com/forums/showpost.php?p=148900&postcount=9 guide and
http://javascript.about.com/library/blradio4.htm
but for somereason it doesn't seem to work.
So can u guys plz look over my simplified version of the survey and see whats is wrong.
Sorry if i sound like a noob, I am new here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var btn = valButton(form.q1);
if (btn == null) alert('No radio button selected');
else alert('Button value ' + btn + ' selected');
function valButton(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i--) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}

</script>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="20">
<form name="science" method="post" action="ad.html" onsubmit="return valButton(btn);">
<tr>
<td width="475"><h3>
<center>
Reasons for organizing Science Olympiad
</center>
</h3></td>
<td width="17"><h3>
<center>
1
</center>
</h3></td>
<td width="17"><h3>
<center>
2
</center>
</h3></td>
<td width="17"><h3>
<center>
3
</center>
</h3></td>
<td width="17"><h3>
<center>
4
</center>
</h3></td>
<td width="17"><h3>
<center>
5
</center>
</h3></td>
</tr>
<tr>
<td width="475">1. It is fun</td>
<td width="17"><input type="radio" id="q1" name="q1" value="1" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="2" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="3" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="4" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="5" /></td>
</tr>
<tr>
<td>2. To motivate students to pursue further education in Science and Engineering</td>
<td width="17"><input type="radio" id="q2" name="q2" value="1" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="2" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="3" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="4" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="5" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" /></td>
</tr>
<tr></tr>
</form>
</table>

testing
</body>
</html>

Old Pedant
11-24-2009, 11:20 PM
No, that code doesn't work. It only records the checked/unchecked state of the *last* radio button in each group.

I think I see a way to fix that code, but I think there's a *much* easier way:


function checkForm(f)
{
var oops = "";
for ( var q = 1; q < 99999; ++ q ) // so you can change #of q's w/o changing code
{
var group = f.elements["q"+q];
if ( group == null ) break;
var okay = false;
for ( g = 0; g < group.length; ++g ) okay |= group[g].checked;
if ( ! okay ) oops += "\nquestion #" + q;
}
if ( oops == "" ) return true;
alert("You must supply an answer to each of these questions:" + oops);
return false;
}

By the by, none of those form fields needs an id. Only the name is needed.

coolgod
11-24-2009, 11:34 PM
Thank your very much.
That was excellent.
how do i thank you on the forum?

Philip M
11-25-2009, 08:35 AM
Thank your very much.
That was excellent.
how do i thank you on the forum?

One way might be to er, well, use the blue "Thank user for this helpful post" button.