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

Question

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

4

我正在创建一个简单的HTML表单，并通过onsubmit事件处理程序调用JavaScript文件。奇怪的是，每当我点击提交按钮时，我的JS文件就不会触发。有帮助吗？

**更新代码

这是我压缩的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>

这是我的JS文件内容：

这是我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;
}

我一直在尝试找出问题所在，但似乎找不到我的代码中的错误。我已经尝试过 JSHint、Firebug（FireFox）和甚至 HTML 在线验证器，但都没有发现任何错误。希望能得到另一对编码眼睛的帮助。谢谢。

- xngvue

1

你在HTML文件中已经包含了一个<script>标签，引用了你的JavaScript文件，是吗？ - Maurice Perry

我发现它在最新的Chrome 39.0和IE 9中运行得非常完美。此外，您的代码似乎没有任何问题。您能否更新一下不起作用的浏览器版本？您可能希望使用document.getElementById('actualFirstName')而不是document.form01.actualFirstName。 - Amitesh

2个回答

0

你需要将js文件链接到html文件中，在html页面的结束标签后添加链接。

这是我尝试过并且有效的方法...

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>

- Awanish

在stackoverflow上的“运行代码片段”可以工作，但对我来说不起作用。我直接将您的代码复制并粘贴到一个新的HTML和JS文件中（只更改文件名），测试了HTML页面，但仍然无法正常工作。我还将<script src="myscripts.js"></script>更改为<script src="/javaScriptFiles/newArtist.js" type="text/javascript"></script>。我不知道发生了什么事。 - xngvue

在分享之前，我已经在本地尝试过了。对我来说运行得很好。我有一个HTML文件和一个myscripts.js文件在同一个文件夹中。我甚至尝试将js文件移动到名为javaScriptFiles的新文件夹中。为此，您必须在javascript之前删除斜杠 - "javaScriptFiles/newArtist.js"。您使用的文件夹结构是什么？我已经将HTML文件和javaScriptFiles文件夹放在同一个位置，并且它可以正常工作。 - Awanish

我找到问题所在了。是因为我在输入文件目录时出了问题。我输入的是<script src="/javaScriptFiles/newArtist.js" type="text/javascript"></script>，而不是正确的<script src="../javaScriptFiles/newArtist.js" type="text/javascript"></script>。 - xngvue

很酷.. 这与我上面提到的没有"/"是一样的.. "../javaScriptFiles/newArtist.js"和"javaScriptFiles/newArtist.js"都可以.. 很高兴知道你能够继续前进.. - Awanish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- M Reza Saberi · Accepted Answer

<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>