scriptygoddess

13 Apr, 2003

Disable button after first click

Posted by: Jennifer In: Bookmarks

Here's a neat trick using javascript to disable a button after it's been clicked once (so you avoid double posts – or in their example, double payments)

NewzCrawler came with a default feed of "javascript tip of the day" which is where I found that…

update: seems there's some problem with actually getting that to work with the MT form. If you get it to work, please post how you did it, or email me, and I'll post another update.

19 Responses to "Disable button after first click"

1 | lynda

April 13th, 2003 at 10:21 am

Avatar

VERY useful tip – thank you!

2 | Etan

April 13th, 2003 at 11:25 am

Avatar

Awesome!

All you have to do is add this code inside your button html:
id="once" onclick="javascript:document.getElementById('once').disabled=true"

3 | Michael Hanscom

April 13th, 2003 at 2:49 pm

Avatar

Hrm — doesn't work in Safari. So all us artsy-fartsy Mac people with oddball browsers can just click and click and click and click to our hearts content…

4 | Jennifer

April 13th, 2003 at 2:55 pm

Avatar

Yes, I figured someone wouldn't be able to resist pointing that out. As it stated in the article I linked to – "This tip works for IE and N6"

As with most things in Javascript – you can't rely on it (even someone with IE or N6 can have javascipt turned off)

But I'm getting tired of having to put that disclaimer on every post I make about Javascript. 😉

5 | Christopher

April 13th, 2003 at 6:17 pm

Avatar

I inserted the code provided, and it works just like it is supposed to, only problem, it does not post anymore. It just sits there. I didn't change any code other than adding that little line of code. What could be wrong? This is what the code looks like after putting it in:

<input style="font-weight: bold;" type="submit" name="post" id="once" onclick="javascript:document.getElementById('once').disabled=true" value=" Post " />

6 | Jennifer

April 13th, 2003 at 6:33 pm

Avatar

Looks like you put it in as they described… wonder why it doesn't work… I'll have to look into it.

7 | Jennifer

April 13th, 2003 at 7:17 pm

Avatar

Well – I'm officially stumped. I tried a whole BUNCH of options and could not get it to work. Either it wouldn't submit the form at all, or it would submit the form but end up on another posting-comment style page (not the preview comment)… really odd…

If anyone gets it to work – please post how you did it…

8 | Michael Hanscom

April 13th, 2003 at 11:55 pm

Avatar

As it stated in the article I linked to – "This tip works for IE and N6"

Oh — you mean I'm actually supposed to read these things, instead of just clicking wildy, then coming back here to whine?

😉

Somehow I missed that line while I was reading it. Hrmpf. Guess I'll just slink back to my own little corner of the web now…(sheepish grin).

9 | Etan

April 14th, 2003 at 1:30 am

Avatar

I can definetly vouch that this does break comments. I can't for the life of me figure out why, though.

Hrmph.

10 | Jennifer

April 14th, 2003 at 8:44 am

Avatar

If you force the form to submit by adding in a "document.formname.submit()", it seems to go to this weird comment form page – and I *think* it's because, since the "post" button was disabled – it doesn't send that info (associated with the button – ie. name="post" value="post") and that is what determines whether you're POSTING a comment or previewing a comment…

The only other way around it would be to put in a hidden field of those same values – (which means you couldn't use the preview comment feature)…

So I think, this trick, while interesting from an education point of view, will not work with blogs too well…

I think Lisa posted on her blog a link to an MT Hack that will prevent double comment posting, which will be more fool-proof than this (and won't break comments) :) I'll make another post in a min linking to that hack…

11 | Jake

April 14th, 2003 at 1:53 pm

Avatar

Great! Thanks for the help on this one!

12 | Terry

July 11th, 2003 at 12:12 pm

Avatar

<script type="text/javascript">
// <!– This will allow edit checking, and still disable the Submit button

function form_control(theForm)
{

   if ( theForm.first_name.value.length == 0 ) {
   alert( 'Please Enter First Name .' );
   theForm.first_name.focus();
   return false;
   }
   // etc… more edit checking here
document.getElementById('once').disabled=true;
theForm.submit();
return true;
}

–>
</script>
<?php

echo "<form name='".$form_name."' action='".$form_action."' method='post' onSubmit='return form_control(this);'>";

// form contents go here….

echo "<center><input type='submit' value='". $submit_msg ."' id=\"once\" /></center>\n
</form>"; //</td></tr></table>"; // "Save Changes"
?>

13 | James

December 10th, 2003 at 4:34 pm

Avatar

Here's code to prevent double-clicking that works, even with Netscape 4:

Insert between <head></head> tags:

<script type="text/javascript">

/*
Block multiple form submission script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact for use
*/

//Enter error message to display if submit button has been pressed multiple times below.
//Delete below line if you don't want a message displayed:

var formerrormsg="You\'ve attempted to submit the form multiple times.\n Please reload page if you need to resubmit form."

function checksubmit(submitbtn){
submitbtn.form.submit()
checksubmit=blocksubmit
return false
}

function blocksubmit(){
if (typeof formerrormsg!="undefined")
alert(formerrormsg)
return false
}

</script>

Button:

<input type="Submit" name="-nothing" onClick="return checksubmit(this)" value=" S U B M I T ">

I always laugh when I see a Javascript that only supports Internet Explorer. Then these same people wonder what's going on when people with older browsers try to use their site. I simply *will not* use a Javascript unless I can get it to work with NN4 and higher. In many cases, you can keep Google'ing until you find a solution.

14 | James

December 10th, 2003 at 4:35 pm

Avatar

The button code seems to be gone from my post…anyway, e-mail me if you want it.

15 | Pit

March 5th, 2004 at 8:34 am

Avatar

<script language="Javascript">
<!–
function Disable(form) {
if (document.getElementById) {
for (var i = 0; i < form.length; i++) {
if (form.elements[i].type.toLowerCase() == "submit")
form.elements[i].disabled = true;
}
}
return true;
}
//–>
</script>

then add this in the <form onSubmit="Disable(this);" action="blah" post="blah">

16 | johnny B

April 5th, 2004 at 7:03 pm

Avatar

Not to raise a dead issue, but it doesn't have to be so hard:

onClick="this.disabled=true; this.value='Sending…'; this.form.submit();"

What's more to it than that?

17 | Benjamin

May 4th, 2004 at 1:56 am

Avatar

johnny B – The only thing more to it than that is sending the the submit button's name/value pair to the server (your example doesn't do that).

Below is what I came up with…

<input type=hidden id=hidden1><input type=submit onclick="this.disabled=true;hidden1.name=this.name;hidden1.value=this.value;this.form.submit()" name=send value=Send>

18 | chaotic intransient prose bursts

September 15th, 2004 at 9:13 pm

Avatar

Submit only once!
A simple way to prevent duplicate comments.

19 | Selvaraj

January 4th, 2005 at 8:00 am

Avatar

How to disable the minimize and maximize button By using the javascript function

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements