Andy Smith's Blog

Page.RegisterStartupScript('Andy', 'MetaBuilders_WebControls_GainKnowledge();');

you don't want to disable buttons after they are clicked

No, i'm not trying to use jedi mind tricks on you.

You really don't want to go down the road of disabling buttons after they've been clicked. Here's what happens... A developer sees that some user with zero patience is clicking the “Process Page” button a million times while the server is processing the request. This is causing havoc, because your click handler for the button is running a million times, and now you have quite a few records in your database, or database errors about duplicated records, depending on how you have your db set up.

The knee-jerk reaction is, “ok, set the disabled property to true on the button after the first time they click it.”
This is a bad idea.

A disabled button doesn't have it's Name/Value pair sent in the form post. Without the Name/Value pair, the serverside has no idea that the button was clicked. So your Click event doesn't get run.

“Ok, so don't disable it. set the onclick event to just return false immediately.”

Ah, ok, this is a little better... but there's still a couple subtle problems. The user is given no visual cues that the button is no longer functional. This doesn't seem like a problem, unless the original button click didn't actually work. Replace “zero patience user” with “patient user with a horrible net connection”. Let's say the first click didn't work because the net connection died while he was viewing the page. He clicks the button, the button is now “disabled”, but the form post doesn't reach your server at all. So he reconnects to the net, and clicks the button... and nothing happens. Your average user has no clue why your form doesn't work, and leaves promptly, never to return. D'oh.

“couldn't the hit refresh to regain the button's functionality?”

That makes 3 big assumptions about the user:
1) They know what a “refresh” button is
2) They know where the refresh butto is.
3) The know that clicking it will solve their problem.

Sure, YOU understand what's going on... you developed it. How would you feel if you needed to stop your car, turn it off, turn it back on, and continue driving... when you've hit the turn blinker too many times in a row. It's just a horrible answer.

So anyway...

The real answer to Mr Zero Patience Guy is on the serverside. Make your db design able to handle multiple calls to the “Process Page” button gracefully. Now, I don't know enough about bulletproof db design to give you the best-practice for that... It'd depend on your existing db design and processing model, i'd imagine... but trust me, this is where the answer lives.

UPDATE
Alert reader Nicole commented here that the db isn't the best place either. And I agree. I was getting in a hurry to finish the blog entry, and kinda misspoke. I meant to say that the solution is somewhere on the serverside instead of the clientside, whether it be in the db, business layer, or UI layer of the server code. She pointed at a post she's made before about a “submission tracker” concept that I've seen before. And tho I've never seen any actual code samples for the concept, I do think it's a good plan.

Comments

Nicole Calinoiu said:

The db isn't really a great place to handle this either for at least four reasons.

First, particularly when working with inserts, it means quite a bit of additional db work that really has nothing much to do with the data rules and which could potentially prevent perfectly valid inserts (e.g.: two identical and nearly simultaneous order submissions from two different browser windows within the same session on an e-commerce site).

Second, it makes downstream processes responsible for UI logic, which could cause eventual code maintenance/adaptibility problems if new UIs are added later which require different rules.

Third, it means passing "bad" data deeper than necessary within your application, increasing the potential for performance problems.

Fourth, what if the back-end processes and/or db are not under your control? If, for example, you're simply calling someone else's web service with the data received from the client, you can't implement this approach, and the web service provider is rather unlikely to want to do it for you.

A better (at least wrt convenience and performance) approach is described at http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&oe=UTF-8&selm=OnLpLVV0CHA.1656%40TK2MSFTNGP09. This is reasonably trivial to implement (e.g.: via an ASP.NET custom control) and places responsibility for dealing with potential user interaction problems much closer to their source.
# September 11, 2003 8:52 AM

Oddur Magnusson said:

I'd recomend returning false and changing the text property for the button that indicates the request is beeing processed


[send]
-> click
[sending ...] (return false onclick)

- Oddur
# September 11, 2003 10:44 AM

Carson said:

Another idea is to just throw a layer over the button after it is clicked so that it essentially dissapears to the user.
# September 11, 2003 3:25 PM

Andy Smith said:

both of these "disable the button some other way" solutions suffer from the same fatal flaw as the others. It completely breaks the page if the first post didn't actually get to the server. There's no way to try again.
# September 11, 2003 3:38 PM

TrackBack said:

# September 18, 2003 9:04 PM

TrackBack said:

# September 19, 2003 3:36 AM

Dylan Greene said:

I programmed it on my site to disable the button after the first click but I set a hidden field to the value of the button.
# September 19, 2003 2:48 PM

Carlo Falci said:

There is another issue here: validators are a great problem. If you click and automatically disappears with the button and some validators are on, you have a problem> no submit button avaiable anymore...
# September 26, 2003 3:29 PM

TrackBack said:

# January 7, 2004 9:09 PM

TrackBack said:

# January 7, 2004 9:11 PM

Larryb said:

All you need to do is put a layer on it or whatever and remove the layer on a timer, say after 30 seconds.
# January 23, 2004 8:54 AM

JulianG said:

Hey!
What about disabling the button for a while?

Then you enable it again (if the page is still there).

This way if the post fails, the button will be enabled again in a few seconds.

Of course you have no way to know the post failed or it's still posting, but...
what the hell! Maybe it's a good option.
# March 5, 2004 3:03 PM

TBORE Toronto said:

I would still handle it on the server with a session variable set when data is accepted from the user. A hidden field variable is sent along as last_post_id or something. A quick check will reveal if the new request is identical to the previous one.
# April 5, 2004 5:47 AM

John said:

I found that disabling the submit button works fine in Mozilla, but not in IE. The work-around was to create an onSubmit event in the form that disabled the submit button.
# May 15, 2004 6:13 PM

Rupesh said:

I have also faced the same problem but i used floating transparent division for avoiding this issue. All we have to do one simple thing on client click just show  division with 100% width and 100% height which covers all the page (position of div u can keep as absolute according to u r setting) and if user clicks again event will fire on that div not on button.i did same thing and my problem is solved anyway if any of u r having better solution plz add here

# August 9, 2007 7:52 AM

Frank said:

Just a though. Another way to handle this is to spawn a new thread to handle the functionality that the button is supposed to handle. I know that sounds like a lot of work, but it really isn't.

# October 26, 2007 12:10 PM

Mal said:

As a none wokring sample that I have been working on recently I come up with this

<form method="post" action="http://www.google.co.uk">

<input id="text" type="text" width="15">

<input id="btn1" type="submit" onclick="this.disabled=true">

<input id="btn2" type="button" onclick="this.form.btn1.disabled=false" value="Enable Submit Button">

</form>

You can hide the reset button and change the color of the submit button at the same time as showing an animated image that the process has started.

# December 21, 2007 11:51 AM

ajones said:

Disabling a button and still getting a postback is easy just use the following code and it works great all of the time:

cmdButton.Attributes.Add("onclick", "this.value='Please wait...';this.disabled=true;" & GetPostBackEventReference(Me.cmdButton))

Viola, you have a disabled button with postback and preventing any duplicates without doing any server side crap.  Put this code in the Page_Load event.

# September 3, 2008 3:11 PM

Arun said:

# September 11, 2008 12:08 AM

PH81 said:

maybe use javascript to change the onclick event of button so that it asks on next click user that u have just send request and ist still beeing prosessed

do u want to resend your request.

if the first request (or any) is ok it will set the onclick to original value that button is ready to click without prompt.

# September 15, 2009 9:04 AM

Andrew said:

If you are using asp.net and the AJAX Control Toolkit in your project, you can also use an UpdatePanelAnimationExtender to reduce opacity on the entire form out on submit.

<ajaxToolkit:UpdatePanelAnimationExtender

    ID="UpdatePanelAnimationExtender1"

    TargetControlID="UpdatePanel1"

    runat="server">

   <Animations>

       <OnUpdating>

           <FadeOut minimumOpacity=".3" />

       </OnUpdating>

       <OnUpdated>

           <FadeIn Duration=".5" Fps="20" />

       </OnUpdated>

   </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:FormView

ID="detail_form"  

etc.

This is optimal IMO, but not perfect, I think the buttons are still active but they don't appear active.

Using this also works for me as suggested above:

cmdButton.Attributes.Add("onclick", "this.value='Please wait...';this.disabled=true;" & GetPostBackEventReference(Me.cmdButton))

And as for requests that don't make it to the server and require a refresh? The number of times that is likely to happen in our environment is almost never, compared to odds of complications or confusion introduced when the Submit is not disabled.

# January 27, 2010 12:25 PM

Kolyamigal2 said:

<a href=kjj7.pp.ua/>%D0%A2%D0%BE%D0%BB%D0%BA%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5 снов</a> - узнай о чем говорят твои сны.

# July 1, 2010 7:00 AM

abilify said:

abilify medication side effects

# August 7, 2010 12:26 AM

effect said:

can I buy norplant in internet fast delivery Delaware

# August 11, 2010 6:33 AM

cytotec said:

buying cytotec online medicine saturday delivery

# August 13, 2010 5:33 PM

buspirone said:

where to get buspirone medicine without script Maine

# August 13, 2010 5:33 PM

evista said:

evista in internet western union no doctors

# August 13, 2010 5:33 PM

purchase said:

buying zestoretic cod accepted international

# August 13, 2010 5:33 PM

where said:

effect ziagen no rx

# August 13, 2010 5:33 PM

vaseretic said:

abuse of vaseretic overnight Connecticut

# August 13, 2010 5:33 PM

price said:

how to get avelox online store Arkansas

# August 13, 2010 5:34 PM

purchase said:

norfloxacin in internet amex South Dakota

# August 20, 2010 1:24 PM

mycophenolate said:

mycophenolate mofetil in internet prioprity mail Louisiana

# August 20, 2010 1:24 PM

where said:

buy cod pepcid without script international

# August 20, 2010 1:24 PM

lovegra said:

abuse of lovegra in internet wire transfer

# August 20, 2010 1:24 PM

cartia said:

cartia cd online saturday delivery New York

# August 20, 2010 1:24 PM

crixivan said:

crixivan no doctors mexico

# August 20, 2010 1:24 PM

sorbitrate said:

where to buy sorbitrate tr cod accepted Iowa

# August 20, 2010 1:24 PM

price said:

generic suprax prioprity mail Oregon

# August 20, 2010 1:25 PM

effect said:

buy ursodiol (ursodeoxycholic) in internet shop cod accepted greece

# August 20, 2010 1:25 PM

purchase said:

how to get estrace online pill cod accepted New Jersey

# August 20, 2010 1:25 PM

where said:

order mefenamic acid in internet without script

# August 20, 2010 1:25 PM

claritin said:

claritin online medicine Nevada

# August 20, 2010 1:25 PM

minocycline said:

low cost minocycline online rx saturday shipping

# August 20, 2010 1:26 PM

brand said:

to buy clindamycin online diners club

# August 20, 2010 1:26 PM

noroxin said:

effect noroxin online american express fedex Vermont

# August 22, 2010 10:35 PM

online said:

can I purchase isotretinoin no script New Hampshire

# August 22, 2010 10:35 PM

geodon said:

i want geodon online diners club overnight Hawaii

# August 22, 2010 10:35 PM

monoket said:

can I buy monoket tabs without script

# August 22, 2010 10:35 PM

order said:

need glucotrol in internet Oklahoma

# August 22, 2010 10:35 PM

mycophenolate said:

mycophenolate mofetil in internet no rx Alaska

# August 22, 2010 10:35 PM

buying said:

want to buy eskalith discount fast delivery Tennessee

# August 22, 2010 10:35 PM

vytorin said:

buy cod vytorin in internet Louisiana

# August 22, 2010 10:35 PM

order said:

to buy claritin coupon Florida

# August 22, 2010 10:35 PM

glyburide(glibenclamide)-metformin said:

glyburide(glibenclamide)-metformin saturday shipping Florida

# August 22, 2010 10:35 PM

price said:

purchase lamotrigine in internet saturday delivery

# August 22, 2010 10:35 PM

cheap said:

buying parlodel saturday delivery mexico

# August 22, 2010 10:35 PM

terazosin said:

best price terazosin check saturday shipping Alaska

# August 22, 2010 10:35 PM

asendin said:

can I purchase asendin in internet paypal

# August 22, 2010 10:36 PM

online said:

sinequan tabs fast delivery

# August 22, 2010 10:36 PM

effect said:

low price isosorbide dinitrate in internet tablets fast delivery

# August 22, 2010 10:36 PM

bupropion said:

bupropion no script

# August 25, 2010 6:37 PM

effect said:

i want mefenamic acid online shop international

# August 25, 2010 6:37 PM

actos said:

i want actos no rx California

# August 25, 2010 6:37 PM

price said:

want to buy claritin in internet tablets prioprity mail Utah

# August 25, 2010 6:37 PM

generic said:

buy clozaril amex saturday shipping Arkansas

# August 25, 2010 6:37 PM

online said:

abuse of floxin paypal

# August 25, 2010 6:37 PM

buying said:

purchase eulexin online france

# August 25, 2010 6:38 PM

online said:

order danocrine rx france

# August 25, 2010 6:38 PM

evista said:

i want evista saturday delivery

# August 25, 2010 6:38 PM

retrovir said:

buy retrovir fast delivery

# September 1, 2010 9:43 PM

fosamax said:

best price fosamax overnight Hawaii

# September 1, 2010 9:43 PM

brand said:

i want pentasa medicine no doctors

# September 1, 2010 9:43 PM

abuse said:

low price mebeverine tablets prioprity mail Maryland

# September 1, 2010 9:44 PM

cheap said:

caduet in internet mastercard Idaho

# September 1, 2010 9:44 PM

thrhtrurth said:

fswiqxlowbqvdowktwbov. <a href=www.acnetreatment2k.com/>acne treatment</a>

mqvboz

# September 5, 2010 9:18 PM

ITalian LAnguage Courses said:

"Hi there, I observe that your revealed content is somewhat understanding because it talks about plenty of interesting info. In Any Event, was questioning regardless of whether  you would wish to interchange web hyperlinks with my web page, as I'm looking to ascertain contacts to more amplify and acquire floor for my net portal. I do  not mind you laying my internet links in the major web page, just approving this inbound links on this unique web web page is much more than adequate. Anyway, would you be type  sufficient message me back again at my website if you are keen in swapping backlinks, I'd seriously worth that. Thanks a lot and I hope to hear from you shortly! "

--------------------------------------------

my website is  

http://coffeecups.mobi

Also welcome you!

# November 23, 2010 3:27 PM

slingplayer ipad app said:

The man who has made up his mind to win will never say "impossible ".

-----------------------------------

# December 21, 2010 8:37 PM

ipad specs review said:

Plain living and high thinking.

-----------------------------------

# December 24, 2010 11:54 AM

dolxikncmc said:

sxgedqkubibudgvbcxhp, <a href="http://www.mkylihzocy.com">pujurvypzi</a>

# January 3, 2011 10:29 PM

dvd recorder reviews said:

"Hello, I see you've a very great properly written report here, may perhaps I use a number of it on my weblog if I cite you as the useful resource? : )"

--------------------------------------------------------------------  

I have a <a href="onlytopreviews.com/">computer reviews desktop</a> Website,i love him.Mania !You are welcome to look!

# January 16, 2011 10:33 PM

enganoWah said:

ipage hosting guide

# June 17, 2011 9:42 AM

licaHypespeep said:

cheap vps hosting - US

# June 24, 2011 3:29 PM

Mckinley Goodrich said:

Your site is extremely perfect ... keep up the effort!

# July 5, 2011 6:38 AM

justhosthosting said:

justhost hosting best host  technologycanada.com/justhost-hosting

# July 15, 2011 10:10 AM

ipagehosting said:

ipage review , best host  technologycanada.com/ipage-hosting

# July 17, 2011 4:09 AM

hostgator review said:

hostgator review , cheap hosting  technologycanada.com/hostgator-hosting

# July 18, 2011 12:09 PM

Avoidlikilt said:

I congratulate, a brilliant idea

# October 3, 2011 11:45 AM

Pro said:

Yea.. you're not too bright. You have no idea what you're talking about.

# October 16, 2011 6:12 PM

Easelmalona said:

glucophage metformin hydrochloride tablets, <a href=raptr.com/glucophage>buy glucophage online</a>, glucophage bristol myer 2008

# December 13, 2011 4:36 AM

beedoreynalda said:

must look at this  , for special offer   online shopping

# December 17, 2011 11:38 AM

cctruqfrvrfl said:

Buying    and slippers you may want or against your kids is incredible. With some great these hunter wellies are adored for toasty and comfortable feel. Womens ugg hunter wellies are shown in lot and size and as a result attention pays prior to when you purchase individuals. Dimension is invariably a principal interest and whenever we explore that, everyone is stated to be accurate. Good, below will be few points which might help you to before you visit or make them provide uggs lovely directory of boots. Get it done: Measure your personal bare lower limb from heel for the longest bottom or else are able to place credit history . bare foot up against the wall then which has a pencil mark the best of your main toe and get right way of measuring.

These footwear from   look just a little bigger as compared to the normal footwear and certain even purchase them downright unpleasant, but uggs unbelievably tender and toasty, and individuals practically pamper most people. There may be fashion conscious individuals that hate a majority of these ugg bailey option boots; in truth one can find even individuals who endure the consequences of publicly needed these hunter wellies banned. On the net. again it's only included with the old craze all-around these hunter wellies, because adore it or despise it you'll have to admit boots can be amazingly pleasant. No marvel, hence, now we have a many celebrities worldwide who support these hunter wellies directly or possibly indirectly.

Now you've gotten made the decision throughout the color, the up coming feel customs understand about is considered the peak in the   are you looking for a high quality, extensive or 3 quarter duration the selection is yours.

References:

a5c37a661701666a9173d8ab19136c2c

# January 14, 2012 1:57 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)