I was answering a question in the ASP.NET forums on Simple-Talk.com\u00a0about how to avoid the issue of users submitting multiple page requests when they click on buttons.\u00a0 My first inclination was hey, just disable the button after they click it and everything will be just fine.\u00a0 So I fired up Visual Studio and threw the following code into a page:<\/p>\n
\nAnd naturally it failed miserably.\u00a0 Why?\u00a0 Because nothing works on the first try — unless fate is trying to store up some catastrophe points to use on you later.\u00a0 And apparently if you disable a button in the onclick it doesn’t post back for reasons that I haven’t dug into very far.\u00a0 Not to be outwitted by HTML, Javascript, .NET, or whatever else you can blame for your problems, I tried a myriad of random ideas until I hit upon this — instead of disabling the button when you click it, set the onclick event to fire a function that returns false.\u00a0 So it looks something like this:<\/p>\n \nThis approach effectively disables the button, but doesn’t gray it out.\u00a0 So there you go.\u00a0 If you want a gray button then this isn’t the blog for you, but it does keep people from clicking on it the button more than once.\u00a0 Naturally, this means that some sticklers out there will whine because the button stays disabled if the request times out or the viewer stops the request manually.\u00a0 Part of me says leave it disabled as vengeful tribute to the multitudes who quintuple-clicked your button and created a horde of duplicate records for you to delete.\u00a0 Then there’s the other part of me that likes the JavaScript setTimeout function and a bit of a challenge:<\/p>\n \nThe disableButton function copies the “standard” onclick method into a fake property of the button for safe keeping, sets the new onclick to the noClick function (which displays a nice message to the user if they DO try to click), then sets up a delayed function call (read–asynchronous method) that executes after a delay that you set when calling the disableButton method (a value of 1000 for the resetDelay = 1 second, so multiply accordingly for your needs).\u00a0 Here’s an example of what it looks like in a button:<\/p>\n \nWhen you click this button, it gets disabled for 30 seconds.\u00a0 And if a user clicks on that button in the interim, they even get a little feedback on what’s going on.\u00a0 Just remember, don’t blame me when you get fired for pasting the script into your project and forgetting to change the message.<\/p>\n","protected":false},"excerpt":{"rendered":" I was answering a question in the ASP.NET forums on Simple-Talk.com\u00a0about how to avoid the issue of users submitting multiple page requests when they click on buttons.\u00a0 My first inclination was hey, just disable the button after they click it and everything will be just fine.\u00a0 So I fired up Visual Studio and threw the……<\/p>\n","protected":false},"author":46738,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"coauthors":[7575],"class_list":["post-2579","post","type-post","status-publish","format-standard","hentry","category-blogs"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/46738"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=2579"}],"version-history":[{"count":3,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2579\/revisions"}],"predecessor-version":[{"id":75373,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2579\/revisions\/75373"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=2579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=2579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=2579"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=2579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<asp:Button runat=\"server\" Text=\"My Button\" OnClientClick=\"this.disabled=true;\" \/><\/code><\/p>\n<asp:Button runat=\"server\" Text=\"My Button\" OnClientClick=\"this.onclick=new Function('return false;');\" \/><\/code><\/p>\n<script type=\"text\/javascript\"
\n\u00a0\u00a0\u00a0 function disableButton(button, resetDelay)
\n\u00a0\u00a0\u00a0 {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 button.oldonclick = button.onclick;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 button.onclick=noClick; \/\/new Function(\"return false;\";
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 setTimeout(\"enableButton('\"+ button.id + \"');\" resetDelay);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0 }
\n\u00a0\u00a0\u00a0 function noClick()
\n\u00a0\u00a0\u00a0 {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert(\"Chill - You already submitted this page once. \"+
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Submitting it twice isn't going to make the \"+\u00a0
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"server go faster.\u00a0 Quit hitting the \"+
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"freakin' button!\";
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return false;
\n\u00a0\u00a0\u00a0 }
\n\u00a0\u00a0\u00a0 function enableButton(buttonId)
\n\u00a0\u00a0\u00a0 {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var button = document.getElementById(buttonId);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if(button!=null)
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 button.onclick = button.oldonclick;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }
\n\u00a0\u00a0\u00a0 }
\n<\/script><\/code><\/p>\n<asp:Button runat=\"server\" Text=\"My Button\" OnClientClick=\"disableButton(this,30000)\" \/><\/code><\/p>\n