[英]Redirect to another page after 10 seconds using javascript and a form submit
因此,我有一个非常基本的表单提交,在用户输入用户名并按提交后,该表单会重定向到另一个页面。
<form action="https://example.com/" method="GET">
<input type="text" name="username" required> <br>
<input type="submit">
</form>
该网址将显示
https://example.com/?username=your-entered-username
但是,我想尝试在此页面上添加重定向计时器,因此在用户按下提交后,他们必须等待10秒,然后将其重定向到:
https://example.com/?username=your-entered-username
我还想添加一个倒数计时器,例如“请稍等x秒”
我设法让它在10秒后重定向,但是它没有抓住?username =部分。 我觉得我已经尽了一切可能,因此在这里寻求帮助是我的最后选择。 我仍在尝试学习编码的基础知识,我真的很感谢有人可以帮助我。
谢谢!
您可以借助JavaScript
来实现。
那么我们将如何进行这项工作:
form
的submit
,换句话说,向它添加一个submit
侦听器。 form
的action
属性,将input
值附加到form
。 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>
一些有用的链接:
了解有关
flexbox
更多信息。了解有关
addEventListener
函数的更多信息。了解有关
setInterval
函数的更多信息。了解有关
replace
功能的更多信息。
希望我能进一步推动您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.