javascript - 10 秒后使用 JavaScript 和表单提交重定向到另一个页面

Question

所以我有一个非常基本的表单提交，在用户输入用户名并按提交后重定向到另一个页面。

<form action="https://example.com/" method="GET">
 <input type="text" name="username" required> <br>
<input type="submit">
</form>

然后将显示 URL

https://example.com/?username=your-entered-username

但是，我想尝试在此页面上添加一个重定向计时器，以便用户按下提交后，他们必须等待 10 秒，然后将其重定向到:

https://example.com/?username=your-entered-username

我还想添加一个倒计时器，上面写着“请等待 x 秒”

我设法让它在 10 秒后重定向，但它没有捕获 ?username= 部分。我觉得我已经尝试了所有可能的方法，所以在这里寻求帮助是我最后的手段。我仍在尝试学习编码的基础知识，如果有人能帮助我，我将非常感激。

谢谢!

Answer 1

您可以借助 JavaScript 来实现此目的。

那么我们将如何完成这项工作:

• 拦截表单的提交，换句话说，为其添加一个submit监听器。
• 根据计数器(变量)，我们将等待大约 10 秒。
• 获取form 的action 属性并将input 值附加到其中。
• 根据 action 属性和 input 的值组成的链接进行重定向。

这是一个演示，其中包含一些有用的说明:

/** waiting until the document is loaded **/
document.addEventListener("DOMContentLoaded", () => {
  /** selecting necessary elements **/
  const form = document.getElementById("my-form"),
    username = form.querySelector('input[name="username"]'),
    countdown = document.getElementById("countdown"),
    remSec = countdown.querySelector("span.count");
  let countSec = 10; /** seconds to wait **/

  /** adding "submit" listener to the "form" **/
  form.addEventListener("submit", e => {
    /** it's better to implement a validation for the input's value but for the demo purposes we'll proceed without no any validations **/
    e.preventDefault(); /** preventing the foem from submitting so we can do it programatically after the 10 seconds **/
    /** show the countdown **/
    countdown.classList.add('visible');
    /** the function is executed every second. It mainly updates how many seconds left and if the 10 seconds are spent it redirects **/
    timer = setInterval(() => {
      if (countSec >= 0) remSec.textContent = countSec--;
      else {
        window.location.href = form.action.replace(/\/$/, "") + "/?username=" + username.value; /** the link is formed using the "target" attribute and the input's value **/
        /** .replace(/\/$/, "") : trims the "/" char at the end of the target attribute if exists because we do add it manually so we ensure that it is always there **/
      }
    }, 1000); /** every second **/
  });
});

.overlay {
  display: none;
  /** the countdown is hidden initially **/
  position: fixed;
  /** stays in place even if scrolling happens **/
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /** the next two rules needs "display: flex" rule to take effect. Note now the "display" property is set to "none" and later it will be changed to "flex" via "JavaScript" **/
  justify-content: center;
  /** centered horizontally **/
  align-items: center;
  /** centered vertically **/
  background-color: rgba(24, 24, 24, .6);
  z-index: 999;
  /** stays on top **/
}


/** style for the text in the countdown "div" **/
.overlay>p {
  padding: 15px;
  background-color: #f5f5f5;
  text-align: center;
  font-size: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 0 25px -2px rgba(18, 18, 18, .75);
}


/** styling the count down seconds numbers (seconds left) **/
.overlay>p .count {
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  background-color: #000;
  color: #fff;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
}


/** this class is used to change the "display" to "flex" of the countdown "div". It is used by "JavaScript" **/
.overlay.visible {
  display: flex;
}

<!-- added an "id" to the form element to easily select it with "JavaScript" -->
<form id="my-form" action="https://example.com/" method="GET">
  <input type="text" name="username" required> <br>
  <input type="submit" value="go">
</form>

<!-- the "div#countdown" will have the count down till redirection happens, also I added some styling to it to be more realistic in this example -->
<div id="countdown" class="overlay">
  <p>You have to wait <span class="count">10</span> seconds before redirecting...</p>
</div>

一些有用的链接:

Learn more about flexbox.

Learn more about addEventListener function.

Learn more about setInterval function.

Learn more about replace function.

希望我能把你推得更远。