Javascript验证表单不重定向页面

时间：2012-08-13 18:57:02

标签： javascript

我已经编写了一个带有javascript的ASP页面来验证表单，然后将它重定向（form.action）到另一个页面，但它只是重新加载页面。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- InstanceBegin template="/Templates/nirsaplate_forms.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="Title/Keywords" -->
<title>TED CEU/PIC Tracking System</title>
<meta name="keywords">
<script type="text/javascript">
var typesAndCovered={};
typesAndCovered['CEU']=['Philosphy & Theory','Programming','Management Techniques','Business Procedures','Facility Management, Planning & Design','Research & Evaluation','Legal Liability & Risk Management','Personal & Professional Qualities'];
typesAndCovered['PIC']=['Leadership, governance and service','Education, training, scholarship and research'];

function ChangeTypeList()
{
var typeList=document.getElementById("Atype");
var coveredList=document.getElementById("typecovered");
var selType=typeList.options[typeList.selectedIndex].value;
while (coveredList.options.length)
  {
  coveredList.remove(0);
  }
var types=typesAndCovered[selType];
if (types)
  {
  for (var i=0;i<types.length;i++)
    {
    var Atype=new Option(types[i],i);
    coveredList.options.add(Atype);
    }
  }
}
</script>
<script type="text/javascript">
<!--

function validateForm(form) {

        if (form.Atype.value == "") {
            alert("You must specify activity to track: CEU or PIC?");
            form.Atype.focus();
            return false;
        }
        if (form.DateEvent.value == "") {
            alert("You must specify a date for this event.");
            form.DateEvent.focus();
            return false;
        }
        if (form.NameEvent.value == "") {
            alert("You must specify a name for this event.");
            form.NameEvent.focus();
            return false;
        }
        if (form.NameSession.value == "") {
            alert("You must specify a session name.");
            form.NameSession.focus();
            return false;
        }
        if (form.UnitsEarned.value == "") {
            alert("You must specify how many units you earned.");
            form.UnitsEarned.focus();
            return false;
        }
        if (form.CEUPICType.value == "") {
            alert("You must specify a CEU/PIC type.");
            form.CEUPICType.focus();
            return false;
        }
        if (form.TEDEvent.value == "") {
            alert("You must specify if this was a TED event or not.");
            form.TEDEvent.focus();
            return false;
        }
        if (form.TypeCovered.value == "") {
            alert("You must specify CEU Core Competency or PIC Category.");
            form.TypeCovered.focus();
            return false;
        }

form.action = "display.asp";
form.submit();

    return true;
}

//-->
</script>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="ChangeTypeList();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr align="center" valign="middle" bgcolor="#000033">
    <td>&nbsp;</td>
    <td align="left" width="150"><a class="tedhome" href="http://www.ted.org">&nbsp;&nbsp;TED Home</a></td>
    <td id="tedtop" width="450" height="20">&nbsp;</td>
    <td width="150"></td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
  <tr valign="top" bgcolor="#003399" height="60">
    <td rowspan="2" colspan="2" height="80"><img src="images/ted_head_1.jpg" alt="TED" height="80" width="500" border="0"></td>
    <td height="60"><img src="images/ted_head_2.jpg" alt="" height="60" width="250" border="0"></td>
  </tr>
  <tr valign="top" bgcolor="#003399" height="20">
    <td id="toplinks" align="right" valign="middle" height="20"><p></p></td>
  </tr>
  <tr bgcolor="#e3e3e3">
    <td colspan="3" align="center" height="20"><div id="tagline">&nbsp;</div></td>
  </tr>
<!-- Begin mainNav -->
  <tr bgcolor="#003399">
    <td colspan="3" height="20">&nbsp;</td>
  </tr>
<!-- End mainNav -->
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
  <tr align="left" valign="top">
    <td>
      <table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
        <tr valign="top">
          <td><!-- InstanceBeginEditable name="Content" -->
          <div id="Content"><h1>TED CEU/PIC Tracking System</h1>
          <p><font color="#cc0000">* Required field</font></p>
          <form name="form" Method="post" onSubmit="return validateForm(form)">
            <table width="650" border="0" cellspacing="1" cellpadding="3" align="center" bgcolor="gray">
              <tr valign="top">
                <td colspan="2" bgcolor="#FFCC66"><h4>CEU/PIC Details:</h4></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Activity to Track:</strong></p></td>
                <td bgcolor="#FFFFFF"><p><select name="Atype" id="Atype" onchange="ChangeTypeList();">
                <option value="">-- Activity Type --</option>
                <option value="CEU">CEU</option>
                <option value="PIC">PIC</option></select></p></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">* </font>Date:</strong></p></td>
                <td bgcolor="#FFFFFF"><input name="DateEvent" type="text" class="ctrl" id="DateEvent" size="10" maxlength="10"></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Event:</strong></p></td>
                <td bgcolor="#FFFFFF"><input name="NameEvent" type="text" id="NameEvent" size="50" maxlength="255"></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Educational Session:</strong></p></td>
                <td bgcolor="#FFFFFF"><input name="NameSession" type="text" id="NameSession" size="50" maxlength="255"></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEUs/PICs Earned:</strong></p></td>
                <td bgcolor="#FFFFFF"><input name="UnitsEarned" type="text" class="ctrl" id="UnitsEarned" size="50" maxlength="255"></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Type:</strong></p></td>
                <td bgcolor="#FFFFFF"><input name="CEUPICType" type="text" id="CEUPICType" size="25" maxlength="255"></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> TED Event:</strong></p></td>
                <td bgcolor="#FFFFFF"><p><select name="TEDEvent" id="TEDEvent"><option value="Yes" selected>Yes</option><option value="No">No</option></select></p></td>
              </tr>
              <tr valign="top">
                <td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Core Competency/Category Covered:</strong></p></td>
                <td bgcolor="#FFFFFF"><p><select id="typecovered"></select></p></td>
              </tr>
              <tr valign="top">
                <td colspan="2" align="center" bgcolor="#FFCC66"><p><br><b>Submit your CEU/PIC tracking.</b></p><p align="center">&nbsp;</p></td>
              </tr>
              <tr valign="top">
                <td colspan="2" align="center" bgcolor="#FFFFFF"><p><input type="submit" value="Submit Data" name="submit" ><input type="reset" name="reset" value="Reset"></p></td>
              </tr>
            </table>
          </form>
          </div>
<!-- InstanceEndEditable -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
<!-- InstanceEnd -->
</html>

任何帮助都会非常有帮助。 谢谢。

2 个答案:

答案 0 :(得分：0)

我的猜测是你进入无限循环，并导致“堆栈溢出”错误;）

尝试删除form.submit();

后的for.action = ... 
form.action = "display.asp";
// form.submit(); // this is what triggers validateForm again and again...

答案 1 :(得分：0)

您在函数validateForm（表单）中使用了表单。 TypeCovered ，但实际ID是 typecovered （所有小写），导致异常，以便函数失败

相关问题
最新问题