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 Markup code for form with submit button:
<input type="submit" id="btnSubmit" value="Submit" />
</form>
Disable Submit Button Using jQuery Solution
Following is jQuery function to prevernt form submission once input button clicked to submit form:
</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>
HTML Markup
Following is the complete HTML markup for your .aspx page:
<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>
As you can see from above code, I used $(this).prop(‘disabled’, true); which is the key to disable submit button after form is submitted to server.
Share Your Comments & Feedback