In this tutorial, we are going to show you how to disable submit button after clicking in jquery. This will prevent double-click submit button action on the form page.
Multiple clicks submit button, may create a problem for you, sometimes due internet or server issue, the user did not notice that submit button already clicked. They click submit button multiple times and will create an issue behind.
To overcome this issue here we show an example to prevent multiple clicks on submit button in jQuery.
jQuery Disable Submit Button Example:
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 |
<html> <head> <title>How to disable submit button on form submission</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <form action="" method="POST" id="contactform"> <input type="text" name="firstname"> <input type="text" name="useremail"> <button type="submit" id="submitBtn">Submit</button> </form> <script type="text/javascript"> $(document).ready(function () { $("#contactform").submit(function (e) { $("#submitBtn").attr("disabled", true); return true; }); }); </script> </body> </html> |
we hope this will solve your issue.