Introduction

While working with ASP.NET Web form, generally we come across situation when we need to use standard ASP.NET validation control along with a JavaScript confirmation message when the form is being submitted. For better user experience and to ensure that form is submitted only once, it's better to disable the Submit button and display "Please wait ..." message.

The Problem with ASP.NET Form

When ASP.NET validation controls (like RequiredFieldValidator) is used along with general JavaScript confirmation functionality in ASP.NET Form for the button, even if ASP.NET validation controls fails to validate the form, user gets the JavaScript confirmation alert message. User either clicks OK or Cancel button in the confirmation box, the form is not submitted to the server as the ASP.NET validation controls fails, this is not a good user experience.

In another scenario, sometimes user may click the Submit button twice by mistake and you will end up two records with duplicate data in your database. To avoid this situation, the ideal way is to disable the Submit button when it is clicked for the first time. If we use simple JavaScript client side disable functionality using JavaScript in ASP.NET form, it disable the button before even submitting the form to the server as a result your data doesn't reach to the server.

How to get confirmation and disable the submit button in ASP.NET Web form

The solution of above mentioned two problems is to attach confirmation, disable as well as "Please wait ..." functionality into the button after checking the Page_ClientValidate() function. Once you are done with above, you can attach the PostBack event of the Submit button by using GetPostBackEventReference method of the Page class. The complete code looks like below.

Sample ASP.NET Form with RequiredFieldValidator

<form id="form1" runat="server">
<a href="searchrecords.aspx" title="Search records">Search Record</a>
<hr />
<div>
<asp:Label ID="lblMessage" runat="server" ForeColor="Red" EnableViewState="False"></asp:Label>
<table border="1" style="border-collapse:collapse;" cellpadding="2" cellspacing="1">
<tr>
<td>First Name</td>
<td><asp:TextBox ID="txtFName" runat="Server"></asp:TextBox>
<asp:RequiredFieldValidator ID="Re1" runat="Server" ControlToValidate="txtFName" Text="*" />
</td>
</tr>
<tr>
<td>Last Name</td>
<td><asp:TextBox ID="txtLName" runat="Server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="Server" ControlToValidate="txtLName" Text="*" />
</td>
</tr>
<tr>
<td>Active</td>
<td><asp:DropDownList ID="dropActive" runat="server">
<asp:ListItem Text="Yes" Value="true"></asp:ListItem>
<asp:ListItem Text="No" Value="false"></asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnSubmit" runat="Server" Text="Submit" OnClick="AddRecords" /></td>
</tr>
</table>
</div>
</form>

Code behind: C# Code

protected void Page_Load(object sender, EventArgs e)
{
// write the attributes that will avoid double clicking
this.btnSubmit.Attributes.Add("onclick", DisableTheButton(this.Page, this.btnSubmit));
} 

Code behind: VB.NET Code

Protected Sub Page_Load(sender As Object, e As EventArgs)
    ' write the attributes that will avoid double clicking
    Me.btnSubmit.Attributes.Add("onclick", DisableTheButton(Me.Page, Me.btnSubmit))
End Sub

Write above code in the Page_Load event of the page. You can notice that I have added an attribute of onclick event of the button. This attribute will be written by the function called DisableTheButton that is taking two parameter, Page and the button that needs to disable. Below is the code for DisableTheButton fucntion.

DisableTheButton function code: C# Code

private string DisableTheButton(Control pge, Control btn)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("if (typeof(Page_ClientValidate) == 'function') {");
sb.Append("if (Page_ClientValidate() == false) { return false; }} ");
sb.Append("if (confirm('Are you sure to proceed?') == false) { return false; } ");
sb.Append("this.value = 'Please wait...';");
sb.Append("this.disabled = true;");
sb.Append(pge.Page.GetPostBackEventReference(btn));
sb.Append(";");
return sb.ToString();
}

DisableTheButton function code: VB.NET Code

1: Private Function DisableTheButton(pge As Control, btn As Control) As String
2:     Dim sb As New System.Text.StringBuilder()
3:     sb.Append("if (typeof(Page_ClientValidate) == 'function') {")
4:     sb.Append("if (Page_ClientValidate() == false) { return false; }} ")
5:     sb.Append("if (confirm('Are you sure to proceed?') == false) { return false; } ")
6:     sb.Append("this.value = 'Please wait...';")
7:     sb.Append("this.disabled = true;")
8:     sb.Append(pge.Page.GetPostBackEventReference(btn))
9:     sb.Append(";")
10:     Return sb.ToString()
11: End Function

You can notice in the above code snippet that I am using StringBuilder to form the complete JavaScript code I want to fire once the Submit button is clicked. In line number  4, I am first validating the ASP.NET form, this will check all ASP.NET Validation controls and ensures that it has not failed. Once it is done, it goes to next line 5 and gives a Confrmation box to the user, if user clicks Cancel that will return false, it stops there itself and gives opportunity to the user to work withe form again. If user clicked OK that will return true, it will go the next line 6 and change the value of the button to "Please wait..." and move to next line 7 that disables the button. The very next line 8 (that gets the PostBack event reference of the button that is nothing but the JavaScript postback method of ASP.NET form) submits the form.

All above steps can be better shown by below pictures.

Validation control fails

Validation control pass and getting confirmation from user

User confirms by clicking OK, the Submit button value changed to "Please wait..." and disabled the button

Summary

To summarize the above steps I am ensuring that all ASP.NET Validation controls fires before getting confirmation from user and once it's done, I am disabling the button to make sure that this is not clicked more than once. This functionaluty is very useful in finance related websites like eCommerce, Bank Websites etc.

Hope you find this article interesting. To get further article alert directly in your email box, please subscibe to rss feed. Thanks for reading and happy coding !