[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.&nbsp;&nbsp;</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>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q1A1" value="Erogonomics
Training" CHECKED>&nbsp;Erogonomics Training
               <input type="hidden" Name="Q1A1B" value="Erogonomics
Training"></TD>
     </TR>
     <TR bgColor=#E6E5DC><TD>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q1A2" value="Health Issues"
CHECKED>&nbsp;Health Issues
               <input type="hidden" Name="Q1A2B" value="Health
Issues"></TD>
     </TR>
     <TR bgColor=#E6E5DC><TD>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q1A3" value="Plant Safety">
&nbsp;Plant Safety<input type="hidden" Name="Q1A3B"></TD>
     </TR>
     <TR bgColor=#E6E5DC><TD>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q1A4" value="Wastwater
Protocols">&nbsp;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.&nbsp;&nbsp;</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>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q2A1" value="1">&nbsp;1
               <input type="hidden" Name="Q2A1B"></TD>
     </TR>
     <TR bgColor=#E6E5DC><TD>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q2A2" value="2" CHECKED>&nbsp;2
               <input type="hidden" Name="Q2A2B" value="2"></TD>
     </TR>
     <TR bgColor=#E6E5DC><TD>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q2A3" value="3">&nbsp;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.&nbsp;&nbsp;</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>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q3A1" value="1">&nbsp;1
               <input type="hidden" Name="Q3A1B"></TD>
     </TR>
     <TR bgColor=#E6E5DC><TD>&nbsp;</TD>
          <TD><input type="checkbox" Name="Q3A2" value="2">&nbsp;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">&nbsp;Save as
Incomplete
          </TD>
          <TD align="left"><BR>
               <INPUT type="radio" name="finished" value="Y" checked>
&nbsp;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