prevent multiple clicks on submit button in jquery
Today, we would like to share how to prevent multiple clicks on submit button in jquery. if you want to disable the submit button then you can use the disable attribute for jquery.
when users submit a large amount of form data at that time it’s taken more time. the user click the submit button multiple times and the form will be submitting again and again. so we need to disable the submit button for this type of solution.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html lang="en"> <head> <title>Prevent Multiple Clicks on Submit Button in Jquery - XpertPhp</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> |
Please follow and like us:
