[Javascript] Form Validation
Teresa L Cannon
Teresa.Cannon at ipaper.com
Tue Sep 18 14:36:29 CDT 2001
I have a survey where I allow the users to "Save As Incomplete". This
pulls out current information on questions they have answered and allows
them to go back and delete/update/insert answers before the final submit.
In order to do this, I have to give the check box elements a different
"name" because they can submit muliple answers for these types of
questions. I have the following script to check to see if at least one
element (answer) is checked for each question. I also have hidden elements
for my ASP page.
I am currently getting "Please check one of boxes in the next question"
because the checkbox names are different (and need to be).
Here's the HTML:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="EHS.css">
<script language="JAVASCRIPT">
function GoForm2(form)
{
if (document.Form2.finished[1].checked)
{
for (var e = 0; e < form.elements.length; e++)
{
var el = form.elements[e];
if (el.type == 'radio' && el.type != 'hidden')
{
var group = form[el.name];
var checked = false;
if (!group.length)
checked = el.checked;
else
for (var r = 0; r < group.length; r++)
if ((checked = group[r].checked))
break;
if (!checked)
{
alert('Please check one of the radio buttons on the
next question.');
el.focus();
return false;
}
}
else if (el.type == 'checkbox' && el.type != 'hidden')
{
var group = form[el.name];
if (!group.length)
checked = el.checked;
else
for (var r = 0; r < group.length; r++)
if ((checked = group[r].checked))
break;
if (!checked)
{
alert('Please check one of the checkboxes on
the next question.');
el.focus();
return false;
}
}
else
{
if (el.value == "" || el.value == null || el.value == "
" && el.type != 'hidden')
{
alert('Please answer the next question.');
el.focus();
return false;
}
}
}
return true;
}
return true;
}
</script>
</HEAD>
<body bgcolor="#F0F0DF" leftmargin="0" topmargin="10">
<form action="Survey-Script.asp" name="Form2" id="Form2" method="post"
onsubmit="return GoForm2(this)">
<BR>
<TABLE align=center border="0" cellPadding="6" bgcolor=#E6E5DC cellSpacing
="1" width="70%">
<TR bgColor=#E6E5DC bordercolor=#E6E5DC><TD colspan="2"></TD></TR>
<TR bgColor=#E6E5DC>
<TD align="right">1. </TD>
<TD>Check all that you are responsible for below.</TD>
</TR>
<input type="hidden" Name="QNumber1" value="1">
<input type="hidden" Name="Q1ACounter" value="4">
<input type="hidden" Name="QType1" value="1">
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q1A1" value="Erogonomics
Training" CHECKED> Erogonomics Training
<input type="hidden" Name="Q1A1B" value="Erogonomics
Training"></TD>
</TR>
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q1A2" value="Health Issues"
CHECKED> Health Issues
<input type="hidden" Name="Q1A2B" value="Health
Issues"></TD>
</TR>
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q1A3" value="Plant Safety">
Plant Safety<input type="hidden" Name="Q1A3B"></TD>
</TR>
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q1A4" value="Wastwater
Protocols"> Wastwater Protocols
<input type="hidden" Name="Q1A4B"></TD>
</TR>
<TR bgColor=#E6E5DC bordercolor=#E6E5DC><TD colspan="2"></TD></TR>
<TR bgColor=#E6E5DC><TD align="right">2. </TD>
<TD>Q2 is second?</TD>
</TR>
<input type="hidden" Name="QNumber2" value="2">
<input type="hidden" Name="Q2ACounter" value="3">
<input type="hidden" Name="QType2" value="1">
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q2A1" value="1"> 1
<input type="hidden" Name="Q2A1B"></TD>
</TR>
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q2A2" value="2" CHECKED> 2
<input type="hidden" Name="Q2A2B" value="2"></TD>
</TR>
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q2A3" value="3"> 3
<input type="hidden" Name="Q2A3B"></TD>
</TR>
<TR bgColor=#E6E5DC bordercolor=#E6E5DC><TD colspan="2"></TD>
</TR>
<TR bgColor=#E6E5DC><TD align="right">3. </TD>
<TD>Question three OK?</TD>
</TR>
<input type="hidden" Name="QNumber3" value="3">
<input type="hidden" Name="Q3ACounter" value="2">
<input type="hidden" Name="QType3" value="1">
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q3A1" value="1"> 1
<input type="hidden" Name="Q3A1B"></TD>
</TR>
<TR bgColor=#E6E5DC><TD> </TD>
<TD><input type="checkbox" Name="Q3A2" value="2"> 2
<input type="hidden" Name="Q3A2B"></TD>
</TR>
<TR bgColor=#E6E5DC bordercolor=#E6E5DC><TD colspan="2"></TD>
</TR>
<TR bgcolor="C0C0C0">
<input type="hidden" name="Survey" value="266">
<input type="hidden" name="LID" value="322111">
<input type="hidden" name="Count" value="3">
<input type="hidden" name="R" value="4">
<TD align="right"><BR>
<INPUT type="radio" name="finished" value="N"> Save as
Incomplete
</TD>
<TD align="left"><BR>
<INPUT type="radio" name="finished" value="Y" checked>
Submit Final Survey
</TD>
</TR>
<TR bgcolor="C0C0C0">
<TD colspan="2" align="center">
<input TYPE="submit" VALUE="Save/Submit Survey" Name
="button1"><BR>
</TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
It is still giving me an alert. How do I get around this?
More information about the Javascript
mailing list