Disable submit button after click

Is it possible to disable the submit button after being clicked once?

I keep receiving several e-mails of the same thing and this has been increasing lately as visitors have been increasing.

Thanks for your help.

Darin, this is simple enough to do with javascript (with the obvious caveat that it won’t work in non-javascript browsers and if the user has disabled javascript intentionally). all you need is an “onsubmit” part in your form’s opening tag. here’s a small example:


<form name="testform" method="post" action="process_form.php" onsubmit="this.elements['submit'].disabled=true;">
  <input type="submit" name="submit" value="send this off...">
</form>

What if I already have another “onsubmit” tag in there? I use it to check that the fields are completed.

How would I put both of them in there?

This is what I have now:

<form method="POST" action="linkadded.php" onsubmit="return formCheck(this);">

You should be able to just chain the onsubmit commands together, so that first it runs the form check, and then disables the submit button.

<form method="POST" action="linkadded.php" onsubmit="return formCheck(this); this.elements['submit'].disabled=true;">

one word of caution, though: i don’t know what your formCheck function does, but what if the check returns false ? does your page pop up a javascript alert or something, saying “you haven’t filled in this or that” ?

in that case, we might need to modify the onsubmit code to only disable the submit button if the form check has been passed first.

<form method="POST" action="linkadded.php" onsubmit="if (formCheck(this)) { this.elements['submit'].disabled=true; } else { return false; }">

to break it down, this is what it does: first, it runs formCheck. this will presumably return a true if the check was successful, or false if there was some problem (a compulsory field not filled in, or whatever). now, if the check returned true, javascript disables the submit button and lets the browser carry on with the form submission. if the check failed, however, the javascript will only execute “return false” which has the effect of telling the browser NOT to process the form as normal, i.e. not to proceed to linkadded.php

hope this was clear enough. let me know if it all worked.

Well, my Internet connection is too fast for me to determine. When I click on the submit button, I don’t have time to see if it gets disabled or not, the page changes right away.

I don’t think it is working however, because I did get a object not supported error at one time, but couldn’t get it to come up again.

Check it out for your self, feel free to submit the form, don’t worry.

http://www.foodsfortrade.com/database/add2.php

cryptically enough, the name of your submit button is “B1”.
try changing my code to


<form method="POST" action="linkadded.php" onsubmit="if (formCheck(this)) { this.elements['B1'].disabled=true; } else { return false; }">

for testing purpouses (since your connection is too fast), use this code (make sure to replace it with the one above before going live with it again)


<form method="POST" action="linkadded.php" onsubmit="if (formCheck(this)) { this.elements['B1'].disabled=true; return false; } else { return false; }">

what this does is: after (hopefully) disabling the submit button, it will do a “return false”, indicating to the browser NOT to process the form. this way you’ll see if the button gets disabled properly or not, as your form won’t jump to the next page.

Thanks a lot for your help! I really appreciate it.

It worked like a charm. :slight_smile:

anytime, mate…i love it when a plan works out (or whatever hannibal in the a-team always says) :smiley:

Silly Brit…

“I love it when a plan comes together.”

i’m german actually, but grew up in italy…and watched the a-team on the swiss french channel…so there creole :stuck_out_tongue:

[QUOTE=redux;589526]cryptically enough, the name of your submit button is “B1”.

That’s because MS FrontPage makes buttons like that. The next button would be named B2.