Prevent Multiple Button Clicks in ASP.NET – How to Implement the Netflix "Please Wait…" Button


Netflix has a nice submit button so that when you click it, it changes to “Please Wait…” and disables itself to prevent you from clicking it again.


before submit


after submit

I have problems all the time with my users doing this, and I never spent time trying to solve it.

You would think all you need to do is wire up the button to some Javascript that would just disable the button. That is what I thought. The problem is once you do that, it prevents the postback from happening.

The way around this is to have a script run “OnBeforeUnload” so that it is still disables it late enough to not prevent postback. The only problem with this is that it would disable the button on each Unload request. We must solve this also.

I realize you can throw all this in a custom button, but since I just got this to work, here is my quick solution:

Put the following in your page's base class (assuming you have one). If not, throw it in your codebehind.


public void SetOnClickDisable(System.Web.UI.WebControls.Button control)
{
control.Attributes.Add("onclick","formSubmitted = true;");

string javascript;

javascript = "if (!formSubmitted) return;";
javascript += "var button = document.getElementById('" + control.ID + "');";
javascript += "button.value = \" Please Wait... \";";
javascript += "document.body.style.cursor = 'wait';";
javascript += "button.disabled = true;";

RegisterStartupScript("onbeforeunload", "");
}

The first line tells the function that gets called that the button was pressed triggering postback. This will prevent every Unload from running this function. The rest assembles the function to disable the Button you pass into it.

Next, call it from your page.


base.SetOnClickDisable(SubmitSearch);

Thats all you need to get it working. Now some cool css to make it look like a Netflix button. In your css file (or in the page if you want) put:


.netflix-button
{
font: 11px arial,helvetica, sans-serif;
font-weight: bold;
letter-spacing: 1;
color: #333333;
cursor: pointer;
cursor: hand;
background-image : url(/img/button.gif);
background-color : White;
}

And then in your aspx page put:



You also need the background for the image which you can get here and save it in the path you specify in your css .netflix-button class above.

***Understand that this is a Netflix image, so ONLY use this as an example. In fact, I have no right to even link to it, but I figure that it is easier to show it this way, and Netflix won't care as long as we don't rip it off.

Note that this works with the validation controls also. The buttons will not be disabled if the postback is stopped in the validation stage.

The main problem right now is that this will only work for one button on a page. It isn't the worst deal in the world because it isn't that often that I have multiple buttons on a page that spawn long running operations. In any case, if anyone wants to solve that, go for it!

If I left anything out, let me know as this works successfully over here. And if it works, let me know too!

,

One response to “Prevent Multiple Button Clicks in ASP.NET – How to Implement the Netflix "Please Wait…" Button”

  1. Had to make some changes to get it to work (pass in a button to this method call):

    this.OnClientClick = “window.formSubmitted = true;”;

    string javascript = “window.onbeforeunload = function() {\n”;
    javascript += “if (typeof(window.formSubmitted) == ‘undefined’) return;\n”;
    javascript += “var button = document.getElementById(‘” + this.ClientID + “‘);\n”;
    javascript += “if (button) button.disabled = ‘true’;}\n”;

    this.Page.ClientScript.RegisterStartupScript(typeof(string), “onbeforeunload”, javascript, true);

Leave a Reply

Your email address will not be published. Required fields are marked *