Greying out a submit button after it has been clicked?

[FoxhoundX]

What I want to do is like paypal has - A safety from double+ submissions of the same form.

Anyone have an Idea of how to do this?

[noiseusse]

you would use javascript for this.

you have a form:

<form action="whatever.php" method="POST">
<input type="submit" value="submit" id="sbutton" onClick="disableButton();">
</form>

in the head of the page:

<script language="javascript">
function disableButton(){
var the_button = document.getElementById("sbutton");
the_button.disabled=true;
the_button.value = 'disabled';
}
</script>

there's a lot more you can do than just disable it and change the text. STW

[FoxhoundX]

Hmm..the problem with that is the form does not process after it is clicked..

:S

[kevinsequeira]

try this

<script language="javascript">
function disableButton(){
var the_button = document.getElementById("sbutton");
the_button.disabled=true;
the_button.value = 'disabled';
document.form_name.submit();
}
</script>

[noiseusse]

I see your point. How 'bout this:

<form name="the_form" action="whatever.php" method="POST">
<input type="submit" value="submit" name="the_button" onClick="disableButton();">
</form>

<script language="javascript">
function disableButton(){
var the_button = document.getElementById("sbutton");
the_button.disabled=true;
the_button.value = 'disabled';
document.the_form.submit();
}
</script>

however, this doesn't cover your enter key being pressed. Yet another option is to capture the form submission:

<form name="the_form" onSubmit="disableButton();">

I'm not 100% on that one but you might wanna check it out.

and yet another is to write two functions, the one that disables the button and then submit's the form and another that captures the enter key press and makes it do nothing.

this only works in netscape 4+ but I'm sure you can find it for IE pretty easily, stw

<script language="javascript">
function readKey(e){
if(e.keyCode == 13){
//do nothing
}
}
document.onKeyPressed = readKey
</script>

[FoxhoundX]

Thank you! The onsubmit call works fine 🙂