{"id":62,"date":"2015-11-06T07:12:00","date_gmt":"2015-11-06T07:12:00","guid":{"rendered":"http:\/\/waynenguyen.org\/dev\/2015\/11\/06\/disable-button-on-submit-using\/"},"modified":"2016-05-21T03:15:53","modified_gmt":"2016-05-21T03:15:53","slug":"disable-button-on-submit-using","status":"publish","type":"post","link":"https:\/\/bruceng.com\/dev\/?p=62","title":{"rendered":"Disable button on submit using javascript to prevent double clicking"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\">\nDisable button on submit instead of onclick<\/p>\n<p>Use this code?<\/p>\n<div class=\"post-text\" itemprop=\"text\" style=\"background-color: white; border: 0px; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.3; margin: 0px 0px 5px; padding: 0px; width: 660px; word-wrap: break-word;\">\n<div style=\"border: 0px; clear: both; margin-bottom: 1em; padding: 0px;\">\nButton is not firing postBack because you have disabled this. The approach to avoid multiple postBack is to have two buttons side by side. Real and dummy. On first click hide\/delete the real button and show the dummy one<\/div>\n<pre class=\"lang-cs prettyprint prettyprinted\" style=\"background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; width: auto; word-wrap: normal;\">&lt;asp:Button ID=\"Button1\" runat=\"server\" Text=\"Button\" OnClick=\"Button1_Click\" ClientIDMode=\"Static\" OnClientClick=\"disableButton();\"\/&gt;\n\n&lt;asp:Button ID=\"ButtonDummy\" runat=\"server\" Text=\"Button\" ClientIDMode=\"Static\" OnClientClick='return false;' style=\"display:none;\"\/&gt;<\/pre>\n<div style=\"border: 0px; clear: both; margin-bottom: 1em; padding: 0px;\">\nand JS:<\/div>\n<pre class=\"lang-cs prettyprint prettyprinted\" style=\"background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; width: auto; word-wrap: normal;\">function disableButton() {\n\n $(\"#Button1\").hide();\n\n $(\"#ButtonDummy\").show();\n\n return true;\n }<\/pre>\n<\/div>\n<table class=\"fw\" style=\"background-color: white; border-collapse: collapse; border-spacing: 0px; border: 0px; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 16.9px; margin: 0px 0px 4px; padding: 0px; width: 660px;\">\n<tbody style=\"border: 0px; margin: 0px; padding: 0px;\">\n<tr style=\"border: 0px; margin: 0px; padding: 0px;\">\n<td class=\"vt\" style=\"border: 0px; margin: 0px; padding: 0px; vertical-align: top;\">\n<div class=\"post-menu\" style=\"border: 0px; margin: 0px; padding: 2px 0px 0px;\">\n<a class=\"short-link\" href=\"http:\/\/stackoverflow.com\/a\/27837573\" id=\"link-post-27837573\" style=\"border: 0px; color: #888888; cursor: pointer; margin: 0px; padding: 0px 3px 2px; text-decoration: none;\" title=\"short permalink to this answer\">share<\/a><a class=\"suggest-edit-post\" href=\"http:\/\/stackoverflow.com\/posts\/27837573\/edit\" style=\"border: 0px; color: #888888; cursor: pointer; margin: 0px; padding: 0px 3px 2px; text-decoration: none;\" title=\"\">improve this answer<\/a><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Disable button on submit instead of onclick Use this code? Button is not firing postBack because you have disabled this. The approach to avoid multiple postBack is to have two buttons side by side. Real and dummy. On first click hide\/delete the real button and show the dummy one &lt;asp:Button ID=&#8221;Button1&#8243; runat=&#8221;server&#8221; Text=&#8221;Button&#8221; OnClick=&#8221;Button1_Click&#8221; ClientIDMode=&#8221;Static&#8221; &hellip; <a href=\"https:\/\/bruceng.com\/dev\/?p=62\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Disable button on submit using javascript to prevent double clicking&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,26,16,20],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-debug","tag-hacking","tag-issues","tag-javascript"],"_links":{"self":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":1,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}