When users submit a large amount of form data then it takes more time. the user clicks the submit button several times and the form will be submitted again and again. therefore we need to disable the navigation button for this type of solution.

#example.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="container">
            <form id="myform" method="post">
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                </div>
                <button type="submit" id="btnSubmit" class="btn btn-default">Submit</button>
            </form>
        </div>
        <script type="text/javascript">
            $('#myform').submit(function() {
                $("#btnSubmit", this)
                        .html("Please Wait...")
                        .attr('disabled', 'disabled');
                return true;
            });
        </script>
    </body>
</html>

When form is submitted it will disable all submit buttons inside.