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:
<form id="form1" runat="server">
<input type="submit" id="btnSubmit" value="Submit" />
</form>
<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 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>
</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>
You may also like, 100+ Frequently Asked Interview Questions on Asp.net, Top 10 OOPS Concepts in .NET C# with Examples and other more cracking tutorials on Asp.net, JavaScript, jQuery here.
HTML Markup
Following is the complete HTML markup 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>
<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