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:
- <form id="form1" runat="server">
- <input type="submit" id="btnSubmit" value="Submit" />
- </form>
Disable Submit Button Using jQuery Solution
Following is jQuery function to prevent form submission once, the input button is clicked to submit form:
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('input#btnSubmit').on('click', function () {
- var myForm = $("form#form1");
- if (myForm) {
- $(this).prop('disabled', true);
- $(myForm).submit();
- }
- });
- });
- </script>
Following is the complete HTML for your .ASPX page:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head id="Head1" runat="server">
- <title>Disable Submit Button To Prevent Form Submission Using jQuery</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('input#btnSubmit').on('click', function () {
- var myForm = $("form#form1");
- if (myForm) {
- $(this).prop('disabled', true);
- $(myForm).submit();
- }
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <input type="submit" id="btnSubmit" value="Submit" />
- </form>
- </body>
- </html>