Disable button after first click
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.
April 13th, 2003 at 10:21 am
VERY useful tip - thank you!
April 13th, 2003 at 11:25 am
Awesome!
All you have to do is add this code inside your button html:
id=”once” onclick=”javascript:document.getElementById(’once’).disabled=true”
April 13th, 2003 at 2:49 pm
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…
April 13th, 2003 at 2:55 pm
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.
April 13th, 2003 at 6:17 pm
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 ” />
April 13th, 2003 at 6:33 pm
Looks like you put it in as they described… wonder why it doesn’t work… I’ll have to look into it.
April 13th, 2003 at 7:17 pm
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…
April 13th, 2003 at 11:55 pm
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).
April 14th, 2003 at 1:30 am
I can definetly vouch that this does break comments. I can’t for the life of me figure out why, though.
Hrmph.
April 14th, 2003 at 8:44 am
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…
April 14th, 2003 at 1:53 pm
Great! Thanks for the help on this one!
July 11th, 2003 at 12:12 pm
<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”
?>
December 10th, 2003 at 4:34 pm
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.
December 10th, 2003 at 4:35 pm
The button code seems to be gone from my post…anyway, e-mail me if you want it.
March 5th, 2004 at 8:34 am
<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”>
April 5th, 2004 at 7:03 pm
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?
May 4th, 2004 at 1:56 am
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>
September 15th, 2004 at 9:13 pm
A simple way to prevent duplicate comments.
January 4th, 2005 at 8:00 am
How to disable the minimize and maximize button By using the javascript function