How do you get your Submit button to disable on click?

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.

hello,
thanks for this very nice tips. I've tested with javascript form validation on the page. In that case, when the button is pressed, the javascript display a message if a field is not correctly filled, but the form is sent anyway.
here is the form tag :

Would you have any suggestion to solve this problem ?
I would be delighted to use your script because it does not require javascript !
Best regards,
kelljery

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) {
if (!document.getElementById || !document.createTextNode) {
return false;
}
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
var input = forms[i].getElementsByTagName('input');
if (input[0].type.toLowerCase() == 'submit') {
input[0].onclick = disableSubmit;
}
}
}

function disableSubmit(e) {
var btn = window.event ? window.event.srcElement :
e ? e.target : null;
if (btn) {
btn.setAttribute('disabled', true);
btn.setAttribute('value', 'Please wait...');
var form = btn.parentNode;
while (form.nodeName.toLowerCase() != 'form') {
form = form.parentNode;
}
if (form.onsubmit) {
form.onsubmit();
}
form.submit();
}
return true;
}

Correction for the code I posted above: all occurrences of input[0] should be replaced with input[i].

Okay, I really messed up. Here is the final revision:

window.onload = function(e) {
if (!document.getElementById || !document.createTextNode) {
return false;
}
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
var input = forms[i].getElementsByTagName('input');
for (var j = 0; j < input.length; j++) {
if (input[j].type.toLowerCase() == 'submit') {
input[j].onclick = disableSubmit;
}
}
}
}

function disableSubmit(e) {
var btn = window.event ? window.event.srcElement :
e ? e.target : null;
if (btn) {
btn.setAttribute('disabled', true);
btn.setAttribute('value', 'Please wait...');
var form = btn.parentNode;
while (form.nodeName.toLowerCase() != 'form') {
form = form.parentNode;
}
if (form.onsubmit) {
form.onsubmit();
}
form.submit();
}
return true;
}

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();"]

wouldn't it be much simpler to use this:

<input type="submit" value="Submit! Submit Now!" onClick="this.disabled = 'true';" />

or for extra fancy label changing:

<input type="submit" value="Submit! Submit Now!" onClick="this.disabled = 'true'; this.value='Please wait...';" />

The form don't post. Only the button is disabled. I added same name and id values in form.

Javascript error;

uncaught exception TypeError: Property 'onsubmit' of object # is not a function

(IE 7, Google Chrome)

I prefer this way:

<input type="submit" value=" OK " onclick="this.disabled=true">

tryu

onclick="this.disabled=true" not working.not posting

Perfect solution, thank you Dave.