Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


How do you get your Submit button to disable on click?

I notice that about two weeks ago your site changed subtly, Dave. Before, I'd click on "POST" to submit a comment and then wait and wait while it processed. Now it's still as slow (sorry!) but as soon as I click on that POST button it grays out so I can't click on it again. Cool. How do you do that?


Dave's Answer:

First off, I know, I know, the site runs slow and we are planning our annual migration to a faster server. Now we're serving up almost two million pages/month to over a million unique visitors and, well, that's a lotta traffic! So have just a bit of patience when you're adding your comments, please.

On this particular blog, I'm running Movable Type, but the way I auto-disable the submit button turns out to be generic and I found it from a recommendation on the Movable Type ProNet list. The specific solution I am using came from Solid Wall of Code blog.

In the "Individual Entry" archive template, the bottom of the comment form looks like this:

<input type="submit" name="preview" value=" Preview " />
<input style="font-weight: bold;" type="submit" name="post" value=" Post (please only click once!) " />

You click on that and if the server doesn't immediately return a results page, you can sit on that spot and click it again and again, doing who knows what to the data channel.

Instead, here's the code I have now:

<input type="hidden" name="mode" value="mode" />
<input type="submit" name="post_comment" id="post_comment" value=" Post
(please only click once) "
onclick="document.comments_form.post_comment.disabled=true;
document.comments_form.mode.name = 'post';
document.comments_form.onsubmit();
document.comments_form.submit();"
/>

You do need to ensure that the form tag has both name="comments_form" and id="comments_form" attributes, but otherwise, what I like about this solution is that it's all right there in the "input" tag, without any JavaScript code to add to the top of the page in question.

This is a general HTML solution, by the way, even though what I'm showing is specific to a Movable Type weblog comment template. You could use this to have an automatically disabled submit form on any HTML page or site you're building, complicated or simple.

My thanks to Leo Notenboom of Ask Leo for his initial suggestion of this solution to my duplicate comment problem.


More Useful Blogs and Blogging Articles:
✔   Get my shopping cart plugin to work with WordPress?
We've put in a shopping cart for a client that's not working, and we need some help! The cart is currently using the...
✔   Embed an audio player on a blog or web page?
I have some mp3 audio files I've recorded and would like to have people who visit my site be able to listen to...
✔   Can I write a guest review for AskDaveTaylor.com?
Hi Dave. I'm a big fan of your site and love that you're doing so many reviews now. I've noticed, however, that there...
✔   Change author on WordPress blog post?
I have two accounts set up for my WordPress blog and I'd like to be able to have all my posts from a...
✔   How do I restructure my Wordpress blog without losing SEO?
I have a wordpress blog that was using categories in the url structure like this: /category_name/post_name/ Then I had read somewhere that if...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  




Categorized: Blogs and Blogging , HTML, JavaScript and Web Site Programming   (Article 7419, Written by )
Tagged: blog design, form programming, html, javascript
Previous: How can I change my account password in AOL.com?
Next: How do I install Microsoft Windows Vista in Parallels 3?




Reader Comments To Date: 13

Dave said, on June 12, 2007 7:17 PM:

It is great to know how to grey out the submit button. The first time I saw that on a web site was years ago on the paypal site I believe. I have wonderd since then how it is done, and that it is html code makes it even simpler to implement.

kelljery said, on July 3, 2007 2:28 PM:

hello,
thanks for this very nice tips. I've tested with javascript form validation on the page. In that case, when the button is pressed, the javascript display a message if a field is not correctly filled, but the form is sent anyway.
here is the form tag :

Would you have any suggestion to solve this problem ?
I would be delighted to use your script because it does not require javascript !
Best regards,
kelljery

Jason Boyle said, on July 11, 2007 11:44 PM:

By including the following JavaScript code in any webpage, every submit button in any form on the page will become disabled and its label will read "Please wait..." when clicked:

window.onload = function(e) {
if (!document.getElementById || !document.createTextNode) {
return false;
}
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
var input = forms[i].getElementsByTagName('input');
if (input[0].type.toLowerCase() == 'submit') {
input[0].onclick = disableSubmit;
}
}
}

function disableSubmit(e) {
var btn = window.event ? window.event.srcElement :
e ? e.target : null;
if (btn) {
btn.setAttribute('disabled', true);
btn.setAttribute('value', 'Please wait...');
var form = btn.parentNode;
while (form.nodeName.toLowerCase() != 'form') {
form = form.parentNode;
}
if (form.onsubmit) {
form.onsubmit();
}
form.submit();
}
return true;
}

Jason Boyle said, on July 11, 2007 11:52 PM:

Correction for the code I posted above: all occurrences of input[0] should be replaced with input[i].

Jason Boyle said, on July 11, 2007 11:54 PM:

Okay, I really messed up. Here is the final revision:

window.onload = function(e) {
if (!document.getElementById || !document.createTextNode) {
return false;
}
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
var input = forms[i].getElementsByTagName('input');
for (var j = 0; j < input.length; j++) {
if (input[j].type.toLowerCase() == 'submit') {
input[j].onclick = disableSubmit;
}
}
}
}

function disableSubmit(e) {
var btn = window.event ? window.event.srcElement :
e ? e.target : null;
if (btn) {
btn.setAttribute('disabled', true);
btn.setAttribute('value', 'Please wait...');
var form = btn.parentNode;
while (form.nodeName.toLowerCase() != 'form') {
form = form.parentNode;
}
if (form.onsubmit) {
form.onsubmit();
}
form.submit();
}
return true;
}

Stranger said, on July 24, 2007 9:49 PM:

Or why not just do this:

[INPUT TYPE="submit" VALUE="Click To Send" name=enter onClick="document.theForm.enter.value='One Moment Please...';document.theForm.enter.disabled=true;document.theForm.submit();"]

brian said, on November 9, 2007 2:35 PM:

wouldn't it be much simpler to use this:

<input type="submit" value="Submit! Submit Now!" onClick="this.disabled = 'true';" />

brian said, on November 9, 2007 2:37 PM:

or for extra fancy label changing:

<input type="submit" value="Submit! Submit Now!" onClick="this.disabled = 'true'; this.value='Please wait...';" />

Oge said, on September 13, 2008 11:07 AM:

The form don't post. Only the button is disabled. I added same name and id values in form.

Javascript error;

uncaught exception TypeError: Property 'onsubmit' of object # is not a function

(IE 7, Google Chrome)

Paulo said, on February 9, 2009 9:23 PM:

I prefer this way:

<input type="submit" value=" OK " onclick="this.disabled=true">

ru said, on May 28, 2009 7:19 PM:

tryu

toplu email said, on June 28, 2010 6:03 AM:

onclick="this.disabled=true" not working.not posting

Paul said, on December 16, 2010 6:56 AM:

Perfect solution, thank you Dave.

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.