[英]How to redirect to another page after form submition using a loading screen
<form action='page.html'
method='post'>
<input type="text" name="name" placeholder="Enter your name here">
<input type="submit" value="submit">
</form>
在上面的代码中,表单提交后会有大约 5 秒的加载屏幕或图标(图标更好),然后它将重定向到 page.html。我是 Web 开发世界的新手,所以请帮助我任何人编码部分。 我不知道如何使用 javascript 或 jQuery 来做到这一点。
您可以使用字体真棒微调图标,此代码将在输入字段下方显示微调图标 5 秒。 您可以根据需要更改其位置。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form action='page.html' method='post' onSubmit="return showSpinner(this);">
<input type="text" name="name" placeholder="Enter your name here">
<input type="submit" value="submit">
</form>
<i class="fa fa-spinner fa-pulse" style="font-size:24px;visibility:hidden" id="spinner-icon"></i>
<script>
const showSpinner = form => {
// Display the spinner icon
document.getElementById("spinner-icon").style.visibility = "visible";
// Wait 5 seconds then submit form
setTimeout(function() {
form.submit();
}, 5000); // 5 seconds
return false;
}
</script>
</body>
</html>
<form action='page.html' method='post' onsubmit="myFunction()">
<input type="text" name="name" placeholder="Enter your name here">
<input type="submit" value="submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.