How to disable button after it's pressed?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

How to disable button after it's pressed?

Post by voltrader »

I've seen this done before.

I'd like to disable the button after it's pressed to prevent multiple submissions. Is there a JS script to do this?
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

long live websearches, for example i searched for "html button disable"


http://www.quirksmode.org/js/disabled.html
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post by voltrader »

I've been experimenting with adding this bit of code in the input type=submit line:

Code: Select all

onClick=&quote;this.disabled=true;return true;&quote;
It does indeed disable the form button after its pressed, but I found that even though other POSTed data was sent to the server, the submit line itself is not.

This I gathered from Tim's link above.

Any ideas for a work-around?
R0d Longfella
Forum Newbie
Posts: 20
Joined: Fri Apr 08, 2005 7:17 am

Post by R0d Longfella »

If you want to make sure that the data is only send once, then why don't you use onSubmit?

Code: Select all

<script>
var bSubmitOnlyOnce = false;

function testSubmitOnlyOnce () {
  if (bSubmitOnlyOnce) {
    // alert ("Data already submitted!");
    return false;
  }
  bSubmitOnlyOnce = true;
  return true;
}
</script

<form onSubmit="return testSubmitOnlyOnce();">
<input type=submit name="save" value="Submit Data">
</form>
You could even put in an extra alert.
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post by voltrader »

Thanks, that works great!
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

voltrader wrote:I've been experimenting with adding this bit of code in the input type=submit line:

Code: Select all

onClick=&quote;this.disabled=true;return true;&quote;
It does indeed disable the form button after its pressed, but I found that even though other POSTed data was sent to the server, the submit line itself is not.

This I gathered from Tim's link above.

Any ideas for a work-around?
Indeed, disabled form items are not send. A simple solution is to use hidden fields instead sending the value of the submit button.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

A more user-friendly way of doing that is to force a submission in the function, then disable the button so the users are at least aware. I, personally, don't condone doing this client-side though, because a user can always press the stop button. Sometimes the processing is slow, and trying again speeds it up.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

This thread is two years dead... :|
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

feyd wrote:This thread is two years dead... :|
Yeah, I've noticed it, but too late ... It is a link in one of the recent threads ... sorry :)
There are 10 types of people in this world, those who understand binary and those who don't
Post Reply