Category >
ASP.NET
|| Published on :
Monday, June 29, 2015 || Views:
5133
||
Disable Submit Button Once Form Is Submitted Using jQuery Disable Submit Button
In some situation we want to prevent form submission more than one time after form has been submitted, We need to disable submit button once it is clicked.
to restrict user to click "Submit" button again and again, we can use the following jQuery to diable "Submit" button
Step 1: Create a asp.net web page with a input HTML control(type text) with a input HTML control(Type: Submit)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="disable-double-submission.aspx.cs" Inherits="disable_double_submission" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" />
<input type="submit" id="btnSubmit" value="Submit" />
</div>
</form>
</body>
</html>
Step 2: Write the following jquery function to prevent form submission once user clicked to submit button. You have write the codes in the title section of the webpage
<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>
Complete source codes for "Disable Submit Button Once Form Is Submitted Using jQuery" are below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="disable-double-submission.aspx.cs" Inherits="disable_double_submission" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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 = $("#form1");
if (myForm) {
$(this).prop('disabled', true);
$(myForm).submit();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" />
<input type="submit" id="btnSubmit" value="Submit" />
</div>
</form>
</body>
</html>
so, In this tutorial we have learned how to Disable Submit Button Once Form Is Submitted Using jQuery.
Happy Coding !!!!!