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

Why does calling a JS function from onsubmit clear my form and console?

本文关键字：清除 onsubmit 我的 表单 控制台 函数 JS 调用 一个 为什么      更新时间：2023-09-26

我试图通过表单上的onsubmit事件调用JS函数。当我这样做时，我的表单输入被清除(我的JS控制台，我试图调试这个问题)。JS从我的函数似乎运行，但我不确定为什么表单和控制台被清除。有人能解释一下吗?

如果我通过按钮上的onclick事件调用相同的JS函数，则不清除表单和控制台。是否有一些特殊的调用这个JS函数基于onsubmit事件，导致我所看到的行为?

下面是一个重现这个问题的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>

您的表单正在被提交，这将重新加载页面并显示一个新的干净的表单和控制台。

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

onsubmit应该返回一些值true如果表单可以继续提交，false阻止它。默认情况下，它是true，所以您的表单被提交并刷新页面。

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

相关文章：