How to Disable Submit Button Once Form Is Submitted Using jQuery

If you want to prevent form submission more than one time after form is submitted, you must need to disable submit button once it’s clicked.
 
To restrict users to click submit button again and again, we can use the following jQuery to disable submit button.

Your Form Declaration

Following is the HTML code for the form with the submit button:
  1. <form id="form1" runat="server">   
  2. <input type="submit" id="btnSubmit" value="Submit" />   
  3. </form>   
Disable Submit Button Using jQuery Solution
 
Following is jQuery function to prevent form submission once, the input button is clicked to submit form:
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">   
  2. </script>   
  3. <script type="text/javascript">   
  4. $(document).ready(function () {   
  5. $('input#btnSubmit').on('click'function () {   
  6. var myForm = $("form#form1");   
  7. if (myForm) {   
  8. $(this).prop('disabled'true);   
  9. $(myForm).submit();   
  10. }   
  11. });   
  12. });   
  13. </script>
HTML Markup

Following is the complete HTML for your .ASPX page:
  1. <html xmlns="http://www.w3.org/1999/xhtml">   
  2. <head id="Head1" runat="server">   
  3. <title>Disable Submit Button To Prevent Form Submission Using jQuery</title>   
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">   
  5. </script>   
  6. <script type="text/javascript">   
  7. $(document).ready(function () {   
  8. $('input#btnSubmit').on('click'function () {   
  9. var myForm = $("form#form1");   
  10. if (myForm) {   
  11. $(this).prop('disabled'true);   
  12. $(myForm).submit();   
  13. }   
  14. });   
  15. });   
  16. </script>   
  17. </head>   
  18. <body>   
  19. <form id="form1" runat="server">   
  20. <input type="submit" id="btnSubmit" value="Submit" />   
  21. </form>   
  22. </body>   
  23. </html>   
As you can see from code, given above, I used $(this).prop(‘disabled’, true); which is the key to disable submit button after the form is submitted to the Server.
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now