<form action='page.html'
method='post'>
<input type="text" name="name" placeholder="Enter your name here">
<input type="submit" value="submit">
</form>
In this above code after form submition there will be about 5 seconds of a loading screen or a icon(icon is better), then it will redirect to page.html.I am new to Web Dev world, so please help me anyone with the coding part. I don't know how to do it using javascript or jQuery.
You can use font awesome spinner icon, this code will display a spinner icon below the input field for 5 seconds. You can change its place depending on your needs.
<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>