Thursday, May 22, 2008

Disable Multiple Button Click in Asp.net

This post is a step enhance version of my previous post: Preventing Multiple Button Click on Asp.net Page

Problem: How to disable button immediately on user click in asp.net so that user cannot click multiple time.

Solution: To solve this problem use regular html button, including runat=”server” attribute and write the disable client-side click event which disable button immediately and server-side event which runs the actual code for click event.


To perform this task add javascript function.

Client-Side Event to disable button immediately.
<head runat="server">
<script language = "javascript">
var c=0;
function DisableClick()
{
var objName = 'Button1';
document.getElementById(objName).disabled=true;
c=c+1;
msg = 'Please Wait...('+ c +')!';
document.getElementById(objName).value= msg;
var t=setTimeout('DisableClick()',1000);
}
</script>
</head>

Note: Replace “Button1” with object name of button control

And following button code in body.


Button Control – HTML Button instead of Asp button.
<INPUT id="Button1"
onclick="DisableClick();" type="button"
value="Submit Payment" name="Button1"
runat="server" onserverclick="Button1_Click">

Note: onclick event is calling javascript client-side function and onserverclick event is calling server-side function which performs actual task.


Server-Side Event to perform actual task
This task can be any as per your logic, for an example I am performing some heavy time consuming task, you can even make use of Threading concept to minimize code…

protected void Button1_Click(object sender, EventArgs e)
{
ArrayList a = new ArrayList();
for (int i = 0; i < 10000; i++)
{
for (int j = 0; j < 1000; j++)
{
a.Add(i.ToString() + j.ToString());
}
}
Response.Write("I am done: " +
DateTime.Now.ToLongTimeString());
}



Before Button Click








During Button Click







After Task is done





Related Links:

11 comments:

Douglas said...

This looks like an effective solution to the problem of validation returning the user back to a page with a disabled button. Does this work in Firefox? Firefox is like the school teacher standing over your shoulder waiting you to make even the smallest of mistakes.

DotNetGuts said...

@Douglas
I haven't tested with Firefox, but it should work without any problem, as it is simple HTML control converted as server control and javascript.

Douglas said...

This worked nicely in IE 7, but in FireFox 3.0.1 the disable button did not get enabled. I set the timer to 5 seconds for some back end processing, but the timer just keeps going, showing numbers above 20 seconds. Perhaps Firefox requires a different timeout function.

DotNetGuts said...

Thanks douglas for posting update about firefox.

After your feedback I have re-check the Disable Multiple Button Click in Firefox and its works perfectly.

Now I can say its code work perfectly fine for both Firefox and IE.

Post me update with exact problem you are facing. Its works for me. I am using Firefox 2.0.0.16

Douglas said...

Thanks for staying with this. I finally figured it out, and I think this might be helpful to other .Net developers. I was using several regular expression validation controls, and the javascript which Microsoft uses for these controls appears to kill Firefox's postback calls following a btnDisable onclick event. I moved the client side validation to the server side, and the code works fine in both IE7 and Firefox 3.0.1 A work around would be to write your own javascript validation code, and not rely on the packaged Asp.net ones.

DotNetGuts said...

You are right. Validation Control provided by microsoft are browser dependent in many case, it works fine with IE, but it needs work around with Firefox or other browser. Thanks for sharing your experience.

Anonymous said...

Worked like a charm! Thanks much - it was exactly what I was looking for.

Lidya said...

All i could say is brilliant!

Tried others before stumbled upon this, but its either working only with IE or Firefox Yours works for both like charm!

Thank you so much for sharing. :)

Prophat said...

Lame solution...You are advocating for an html button, why not still use an asp:Button and use some code like this.

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

W0ut said...

in ASP.NET 2.0 is can be done more easily:

http://lawo.wordpress.com/2010/05/14/disable-button-after-click-with-confirmation-clientside/

Meenal Karoli said...

Hi ,

This code is working perfectly fine but the problem which i am facing is i have written a code to send an email on server side click event but it is not sending the email when i am using html button control.....
please suggest what may be the problem

Most Recent Post

Community Updates

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape