Question

我试图通过表单上的onsubmit事件调用JS函数。当我这样做时，我的表单输入被清除（我的JS控制台正在尝试调试此问题）。我的函数中的JS似乎运行，但我不确定为什么表单和控制台被清除。有人可以解释一下吗？

如果我通过按钮上的onclick事件调用相同的JS函数，则表单和控制台不会被清除。基于onsubmit事件调用这个JS函数会导致我看到的行为吗？

这是一个重现此问题的HTML文件：

<!DOCTYPE html>
<html lang="en">

   <body>   
    <script>
      function doThis(){
        console.log("Hello World");
      }
      function doThat(){
        console.log("Goodbye World");
      }
    </script>

    <form onsubmit="doThis()">
        <label>Address: </label><input type="text" name="address"><br>
        <input type="submit" value="Submit"/>
    </form>

    <button onclick="doThat()">Submit Button</button>

  </body>

</html>

Answer 1

您的表单已提交，会重新加载页面并显示一个新的干净表单和控制台。

要取消提交，请将return false;添加到onsubmit或在doThis()中添加JavaScript断点。

Answer 2

如果表单可能会继续提交，则{p> onsubmit应该返回一些值true，并false来阻止它。默认情况下为true，因此您的表单已提交并刷新页面。

Answer 3

当我开发用于从iframe在服务器上提交用户数据的表单时，我遇到了同样的问题，每次用户填写表单数据并点击表单重置为原始状态的提交按钮但我不想自动重置表单。我调查并发现“提交”按钮的默认行为是提交表单数据并将表单重置为原始状态。之后我点击按钮发布数据时使用了简单按钮和调用功能。

为什么从onsubmit调用JS函数清除我的表单和控制台？

3 个答案: