
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? 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.
Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.
Categorized:
Blogs and RSS Feeds
, HTML and CSS
(Article 7419)
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? Subscribe!
Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader. 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. Posted by: Dave at June 12, 2007 7:17 PMhello, Would you have any suggestion to solve this problem ? 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) { function disableSubmit(e) { Correction for the code I posted above: all occurrences of input[0] should be replaced with input[i]. Posted by: Jason Boyle at July 11, 2007 11:52 PMOkay, I really messed up. Here is the final revision: window.onload = function(e) { function disableSubmit(e) { 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();"] Posted by: Stranger at July 24, 2007 9:49 PMwouldn't it be much simpler to use this: <input type="submit" value="Submit! Submit Now!" onClick="this.disabled = 'true';" /> Posted by: brian at November 9, 2007 2:35 PMor for extra fancy label changing: <input type="submit" value="Submit! Submit Now!" onClick="this.disabled = 'true'; this.value='Please wait...';" /> Posted by: brian at November 9, 2007 2:37 PMI have a lot to say, but ...
I do have a comment, now that you mention it!
|
Search
Find just the answers you seek from among our 1700+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Join the List!
Book Links
|