How to redirect to another page after form submition using a loading screen

Question

<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.

Answer 1

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>

Answer 2

<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>

How to redirect to another page after form submition using a loading screen

Question

2 answers

solution1
1 ACCPTED 2021-12-30 08:39:40

solution2
0 2021-12-30 07:43:43

How to redirect to another page after form submition using a loading screen

Question

2 answers

solution1 1 ACCPTED 2021-12-30 08:39:40

solution2 0 2021-12-30 07:43:43

solution1
1 ACCPTED 2021-12-30 08:39:40

solution2
0 2021-12-30 07:43:43