How to prevent form double submit in form that have Validator?
Question
I have web form that have TextBox with Validator :
<script src="../script/jquery-2.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function () {
$('input[type=submit]', this).attr('disabled', 'disabled');
});
});
</script>
<form id="form1" runat="server">
<asp:RequiredFieldValidator ID="v" runat="server" ControlToValidate="name" ErrorMessage="Required"></asp:RequiredFieldValidator>
<asp:TextBox ID="name" runat="server"></asp:TextBox>
<asp:Button ID="submit" runat="server" Text="Go" CausesValidation="true" />
</form>
I want to disable submit button when form submitted but this code also disable submit button when TextBox is not valid by Validator (is empty).
I want a way for all ASP.NET Validators,not only RequiredFieldValidator .
How can I disable submit button only in real submit?
3 answers
solution1
1 ACCPTED 2013-09-13 16:52:57
Check whether the global Page_IsValid variable is set to true before disabling the submit button:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function () {
if (Page_IsValid)
$('input[type=submit]', this).prop('disabled', true);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:RequiredFieldValidator ID="v" runat="server" ControlToValidate="name" ErrorMessage="Required"></asp:RequiredFieldValidator>
<asp:TextBox ID="name" runat="server"></asp:TextBox>
<asp:Button ID="submit" runat="server" Text="Go" CausesValidation="true" />
</form>
</body>
</html>
solution2
0
$(document).ready(function () {
$("form").submit(function (e) {
if($.trim($('#<%=name.ClientID%>').val()) !='' ){ //if textbox not empty
$('input[type=submit]', this).attr('disabled', 'disabled');
}else{
e.preventDefault();
}
});
});
you can use .prop()
$('input[type=submit]', this).prop('disabled', true);
solution3
0 2013-09-11 16:13:13
protected void submit_Click(object sender, EventArgs e) {
if (name.Text != String.Empty) {
submit.Enabled = false;
} else {
submit.Enabled = true;
}
}
this Code without java script
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to prevent double click on the submit form? Javascript
How To Prevent Double Submit With Form Validation
How to submit form with Bootstrap Validator
How to prevent form submit?
How to prevent double form submit without losing any data?
How to prevent a double submit of a form, reusing a modal with a different button?
Ajax data form serialize prevent double submit
How to Prevent Bubbling For Form Submit
How to prevent form submit JQuery
How to prevent default on form submit?
Related Tags