简体   繁体   English

HTML表单-通过onsubmit事件处理程序调用JavaScript

[英]HTML Forms - Calling JavaScript via the onsubmit event handler

I am creating a simple HTML form and calling a JavaScript file via the onsubmit event handler. 我正在创建一个简单的HTML表单,并通过onsubmit事件处理程序调用JavaScript文件。 Oddly, whenever I click the submit button, my JS file does not fire. 奇怪的是,每当我单击提交按钮时,我的JS文件都不会启动。 Help? 救命?

**UPDATED CODES **更新代码

This is what I have for my condensed HTML file: 这是我的压缩HTML文件的内容:

<html>
<form name="form01" id="form01" action="http://itins3.madisoncollege.edu/echo.php"
      method="post" onsubmit="return checkAllTextBoxes();">

      <label for="actualFirstName" class="setWidth">First Name:</label>
      <input type="text" name="actualFirstName" id="actualFirstName" />

      <input type="submit" value="Send Form" />

</form>
</html>
<script src="/javaScriptFiles/newArtist.js" type="text/javascript"></script>

This is what I have for my JS file: 这是我的JS文件的内容:

function checkAllTextBoxes()
{
     if (document.form01.actualFirstName.value.length < 2)
     {
          alert("First name is too short- must be at least two characters or more.");
          return false;
     }

     return true;
}

I have been trying to figure out what went wrong, but can't seem to find the bug in my code. 我一直在尝试找出问题所在,但似乎无法在代码中找到错误。 Tried JSHint, Firebug (FireFox), and even HTML online validators and no bugs came up. 尝试过JSHint,Firebug(FireFox),甚至HTML在线验证器,都没有发现错误。 Another pair of coding eyes will be a big help. 另一双编码眼睛将有很大帮助。 Thanks. 谢谢。

<form name="form01" id="form01" method="post">
    <label for="actualFirstName" class="setWidth">First Name:</label>
    <input type="text" name="actualFirstName" id="actualFirstName" />
    <input type="submit" value="Send Form" onClick="return checkAllTextBoxes();" />
</form>
<Script>
function checkAllTextBoxes()
{
     if (document.form01.actualFirstName.value.length < 2)
     {
          alert("First name is too short- must be at least two characters or more.");
          return false;
     }
     else{
         document.form01.action = "http://itins3.madisoncollege.edu/echo.php";
         document.form01.submit;
         return true;
}
</script>

You have to link your js file to your html. 您必须将js文件链接到html。 Add link at the bottom of your html page after end tag 在结束标记后的html页面底部添加链接

Here's what I tried and it works.. 这是我尝试过的,并且有效。

 function checkAllTextBoxes() { if (document.form01.actualFirstName.value.length < 2) { alert("First name is too short- must be at least two characters or more."); return false; } return true; } 
 <html> <form name="form01" id="form01" action="http://itins3.madisoncollege.edu/echo.php" method="post" onsubmit="return checkAllTextBoxes();"> <label for="actualFirstName" class="setWidth">First Name:</label> <input type="text" name="actualFirstName" id="actualFirstName" /> <input type="submit" value="Send Form" /> </form> </html> <script src="myscripts.js"></script> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM