Question

我对JavaScript和Web开发一般都很陌生。当我想让我的登录系统在用户提交时执行JavaScript函数但在它应该打印到屏幕时什么也不做的时候我有一个问题。我无法弄清楚我错过了什么。任何帮助将不胜感激！

<form name="sign_in" onsubmit="check_stuff()">
    <b>Username...</b>
    <br>
    <input type="text" name="Username" value="Your Username">
    <br>
    <br>
    <b>Password...</b>
    <br>
    <input type="text" name="Password" value="Your Password">
    <br>
    <br>
    <input type="submit" value="Submit">
</form>
<script>
function check_stuff(){
    document.write("gametime");
}
</script>

Answer 1

这很好用。虽然它会覆盖DOM，因为document.write在加载后被调用。这意味着之后屏幕上只会显示gametime。它确实显示但是，但提交表单会重新加载页面。所以它似乎没有任何反复。

要解决此问题，您需要return false;，否则将无法提交表单。同时将onsubmit="check_stuff()"更改为onsubmit="return check_stuff()"。

Answer 2

该函数正在写入文档，但在页面重新加载时，它将在很短的时间内可见。表单仍将发布，因此页面将重新加载并替换您所写的内容。

您希望从事件处理程序中的函数返回结果：

onsubmit="return check_stuff()"

如果您想保留要发布的表单，那么您可以从函数中返回false：

function check_stuff(){
  document.write("gametime");
  return false;
}

（我假设您只是使用document.write进行测试，因为它会用您编写的内容替换整个当前页面。）

Answer 3

它适用于我，我认为你遇到的问题是te页面在提交后重新加载。只需在return false;调用后添加check_stuff()即可避免重新加载。

<form name="sign_in" onsubmit="check_stuff(); return false;">

查看this codepen。

Answer 4

如果您希望不重定向当前页面，则应将表单提交到当前页面中的iframe，如下所示：

<form name="sign_in" onsubmit="check_stuff()" target="#frame">
    <b>Username...</b>
    <br>
    <input type="text" name="Username" value="Your Username">
    <br>
    <br>
    <b>Password...</b>
    <br>
    <input type="text" name="Password" value="Your Password">
    <br>
    <br>
    <input type="submit" value="Submit">
</form>
        <iframe id="frame" name="frame"></iframe>
<script>
function check_stuff(){
    document.write("gametime");
}
</script>

JavaScript函数没有执行？

4 个答案: