Disable Submit button in case of multiple click.. (C#)

Question

My Problem is ,I have a simple web form, which contains two textboxes and a button.there are some asp.net validator controls on page.so i want client side disabling of button when all validation is done.and also after disabling of button, i am executing some server side code.All of this is working fine but, in case when I set postback url of button it gets fail. bellow is some part of coding that will give you some brief idea. Any hint will be highly appreciated.......

I wanted to make this functionality in composite control. here is button class

public class MyButton : Button
{

    protected override void OnPreRender(EventArgs e)
    {
        if (this.CausesValidation)
        {
            if (!String.IsNullOrEmpty(this.ValidationGroup))
            {
                this.Attributes.Add("onclick", @"javascript:

             if (typeof(Page_ClientValidate) == 'function')
                 {
                    if (Page_ClientValidate('" + this.ValidationGroup + "')){" + this.ClientID + ".disabled=true;" + Page.GetPostBackEventReference(this) +

              "}else{return;}}  else{" + this.ClientID + ".disabled=true;" + Page.GetPostBackEventReference(this) + "}");
            }

            else
            {
                this.Attributes.Add("onclick", @"javascript:

                 if (typeof(Page_ClientValidate) == 'function')
                   {
                      if (Page_ClientValidate()){" + this.ClientID + ".disabled=true;" + Page.GetPostBackEventReference(this) +
                  "}else{return;}}  else{" + this.ClientID + ".disabled=true;" + Page.GetPostBackEventReference(this) + "}");
            }
        }
        else
            this.Attributes.Add("onclick", "javascript:" + this.ClientID + ".disabled=true;" + Page.GetPostBackEventReference(this));

        base.OnPreRender(e);
    }

Solution 1

This is the correct and simple way to do this:

Create a helper method in your application (say in a Utlity Namespace):

    Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button)
        button.Attributes.Add("onclick", "this.disabled=true;" & button.Page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString)
    End Sub

Now from the code behind of each of your web pages you can simply call:

    Utility.PreventMultipleClicks(button1)

where button1 is the the button you want to prevent multiple clicks.

What this does is simply sets the on click handler to: this.disabled=true

and then appends the buttons own post back handler, so we get:

onclick="this.disabled=true";__doPostBack('ID$ID','');"

This does not break the default behaviour of the page and works in all browsers as expected.

Enjoy!

Solution 2

If you disable the button then form submission will not happen. Correct way would be to set timer to disable the button. I would also suggest to use submit behavior instead of putting post-back event ref. For example,

function clickHandler(id, validate, validationGroup) {
   var isValid = true;
   if (validate && typeof(Page_ClientValidate) == 'function') {
     isValid = validationGroup? Page_ClientValidate(validationGroup): Page_ClientValidate();
   }
   if (isValid)
   {
      // set timer to disable the button
      var b = document.getElementById(id);
      var f = function() { b.disabled = 'disabled'; };
      setTimeout(f, 100);
      return true;
   }
   return false;
}

And now attach function to your button

protected override void OnPreRender(EventArgs e)
{
    this.Attributes.Add("onclick", 
       string.Format("return clickHandler('{0}', {1}, '{2}')", 
       this.ClientID, this.CausesValidation ? "true" : "false", 
       this.ValidationGroup));
}

Solution 3

If you disable a submit button once it is clicked, then it won't postback. I've been researching this for many many hours now, and the best solution I've seen is here. (The best solution is at the bottom of the page)

I'm now writing a custom server control to add to the toolbox that extends from Button, and uses a slightly modified version of this code. (overriding the OnLoad method)

I'm allowing the user the ability to change the 'processing...' text for something else and may make an attribute that allows the text to change to something else when submission is complete(which would be produced when the postback returns)

Comments

[KP.]

Thanks for this answer. Works great. I created the same solution through an extension method vs utility/helper, but it works great.

[Duncan]

I wasted HOURS on this -- thank you for your answer. I have up-voted your answer, and I hope O.P. will someday accept it.

[Sam]

This does break the default behaviour; it still posts-back and disables the button when ASP.NET validation fails.

[nu everest]

is the first function Javascript or C#?

[Auguste Van Nieuwenhuyzen]

I had a linkbutton and just modified the script to: button.Attributes.Add("onclick", "if(this.disabled) return false; this.disabled=true;"...