Javascript 为什么从onsubmit调用JS函数会清除我的窗体和控制台？_Javascript_Html_Onsubmit

Javascript 为什么从onsubmit调用JS函数会清除我的窗体和控制台？

javascript html

Javascript 为什么从onsubmit调用JS函数会清除我的窗体和控制台？,javascript,html,onsubmit,Javascript,Html,Onsubmit,我试图通过表单上的onsubmit事件调用JS函数。当我这样做时，我的表单输入会被清除（我试图调试这个问题的JS控制台也是如此）。我的函数中的JS似乎正在运行，但我不确定为什么窗体和控制台会被清除。有人能解释一下吗如果我通过按钮上的onclick事件调用相同的JS函数，那么表单和控制台不会被清除。基于导致我看到的行为的onsubmit事件调用这个JS函数有什么特别之处吗以下是重现此问题的HTML文件： <!DOCTYPE html> <html lang="en">

我试图通过表单上的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>


函数doThis（）{
log（“你好世界”）；
}
函数doThat（）{
console.log（“再见世界”）；
}
地址：

提交按钮

onsubmit

应该返回一些值

true

，如果表单可以继续提交，则返回一些值

false

，以防止提交。默认情况下，它是

true

，因此您的表单将被提交并刷新页面。

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

取消提交添加

返回false

到

onsubmit

或在

doThis（）中添加一个JavaScript断点

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

因为您的表单实际上已提交，所以页面会重新加载–因为您没有取消事件的原始行为。你的

按钮不会发生这种情况，因为a）它甚至不是你表单的一部分，b）即使它是表单的一部分，除非它设置了type=“submit”
属性，否则按钮不会提交表单…@CBroetype=“submit”
是
的默认值。它只是没有一个带“a”的表格。”@JonathanLonowski:你是对的，我记错了，我的错。谢谢！这有帮助。结果表明，如果我使用：onsubmit=“return tryThis（）”，然后从tryThis（）返回false，则表单不会提交，页面也不会重新加载。