javascript - javascript 上的 setTimeout() 用于基于表单提交的自定义 URL

Question

如何解决？我一整天都在努力解决这个问题 - 查看其他帖子并尝试不同的方法。非常感谢任何帮助...〜新手

这行 JavaScript 中的 setTimeout() 破坏了代码 - 导致为自定义 URL 传递空值。

计划是

1. 用户在文本字段中键入一个值。
2. 该值显示在网页上。
3. 暂停 4 秒后，用户会根据他们在文本字段中输入的值自动重定向到新网页...该值通过提交表单传递到 URL 中。

...卡在#3 处。页面暂停 4 秒，但没有向 URL 传递任何值，而是重定向到主目录。

有问题的代码:

<form id="type_form" action="html-echo.php" method="post" onsubmit="setTimeout(function() { location.href='http://localhost:8888/vanity/site/' + document.getElementById('nav').value; return false; }, 4000);">
      <input id="nav" maxlength="10" type="text" name="nav" autofocus placeholder="TYPE YOUR CHOICE... (spelling counts)">

        <script>
          if (!("autofocus" in document.createElement("input"))) {
            document.getElementById("nav").focus();
          }
        </script>
      <button class="send" type="submit">SEND</button></form>

谢谢!

Answer 1

像这样尝试一下

<form id="type_form" action="html-echo.php" method="post">
    <input id="nav" maxlength="10" type="text" name="nav" placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus />
    <button class="send" type="submit">SEND</button>
</form>
<script type="text/javascript">
    if (!( document.activeElement.id || document.activeElement.id == 'nav')) {
        document.getElementById("nav").focus();
    }

    document.getElementById('type_form').onsubmit = function() {
        setTimeout(function() {
            document.location.href = 'http://localhost:8888/vanity/site/' + document.getElementById('nav').value;
        }, 4000);

        return false;
    }
</script>

此外，在 timeOut 中返回 false 不会阻止表单提交，您必须立即返回 false。