How to prevent double clicking or multiple Form submission after the ASP.Net Button is clicked?

Below picture shows the typical flow when an ASP.Net Web Form is submitted by the user. You want to prevent double clicking or submitting the form multiple times after the ASP.Net Button is clicked so that same data should not be stored more than once.

We want to prevent multiple form submission at step 1 in the above diagram.  There are many ways to do it and we would discuss some of the options below. Even though these options could be used in most of the scenarios, you can come up with your own options if you understand these concepts.

Option 1: Stop form submission at client side event of button click, when it happens for second time

We would initialize a variable isSubmitted to false. This initialization code is written outside of any event or function – meaning that this would be executed as soon as parsing of document starts(i.e, as soon as user gets the web page from server to the browser). On click of button, which is used for submitting form, we are calling the function preventMultipleSubmissions. This function checks whether the variable isSubmitted is false – if it is false, it will change the value to true(and optionally change the text of button) and submits the form . If user submits the form again, the value would be true for isSubmitted – the form will not be submitted again.

Code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

  var isSubmitted = false;

  function preventMultipleSubmissions() {

  if (!isSubmitted) {

     $('#<%=btnSubmit.ClientID %>').val('Submitting.. Plz Wait..');

    isSubmitted = true;

    return true;

  }

  else {

    return false;

  }

}

</script>

<asp:TextBox ID="txtCounter" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return preventMultipleSubmissions();"  OnClick="btnSubmit_Click"  />

Option 2:  When you click Submit button, disable it and call the PostBack event method directly. Please note that PostBack event method should be called explicity as disabling the button will not post the data to the server.

On Click of ASP.Net Submit button, we disable the button using javascript so that user cannot submit it again. But disabling the button will prevent the form submission, as you cannot submit the form if the button is disabled. So we call the ASP.Net PostBack event method directly. Below picture explains you the flow for the same whereas blue numbered buttons represent the normal flow and orange numbered buttons represent the flow of javascript.

Code: 

btnSubmit.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSubmit, null) + ";");

The above single line of code does everything that we want and let’s dissect the same.

ClientScript.GetPostBackEventReference will call the postback method of the passed ASP.Net server control, Submit button in this case – It will call btnSubmit_Click server method. We are disabling the button and call this PostBackEvent method on click of the button(i.e, onclick event of button).

We are adding this onclick event javascript code by calling Attributes.Add method ASP.Net button. This adds the necessary javascript code and injects the same before the webform(aspx page) is sent to the browser.

Here is the complete code

Code:

<asp:TextBox ID="txtCounter" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"  />

protected void Page_Load(object sender, EventArgs e)
{
  btnSubmit.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSubmit, null) + ";");
}

protected void btnSubmit_Click(object sender, EventArgs e)

{
  //Your code. E.g To write form data to database
}

Option 3:  After the form submission, browser fires onbeforeunload event on window object. Disable the Submit button when this event happens so that user cannot submit the form again.

Window object, available at client side javascript, represents the browser window or frame. When user submits the form by clicking the ASP.Net button, the form is submitted and onbeforeunload event of window object gets fired. We can use this event to disable the button. As we are disabling the button after the form is submitted, user would not be able to submit the form for second time.

Code: 

<asp:TextBox ID="txtCounter" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"  />

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

function preventMultipleSubmissions() {
  $('#<%=btnSubmit.ClientID %>').prop('disabled', true);
}

window.onbeforeunload = preventMultipleSubmissions;

</script>

Thanks for reading the article. If you like this article, please subscribe in the below form