submit button grayed out

Question

I have a submit button on a form that is quite important. I do not want users clicking it more than once. Is there a way to make it unclickable or grayed out after they click it. (maybe an on click event?). My simple code is below

<form method='POST'  action='index.php'>
<input type='text' name='text' id='text'>
<input type ='submit' value='submit' name='submit'>
</form>

Answer 1

You can use an onclick event to grab the button and set its disabled property to true.

<input type ='submit' value='submit'
       id="my_submit_button"  name='submit' 
       onclick="document.getElementById('my_submit_button').disabled = 'disabled'">

The syntax of the disabled attribute is pretty stupid, why it's not boolean I don't know but it is what it is:

http://www.w3schools.com/tags/att_input_disabled.asp

Answer 2

Just add the following onClick attribute to your button:

<input type="submit" value="submit" name="submit" 
onclick="
  if(!submitted) {
    this.value = 'Please wait...';
    this.disabled = true;
    submitted = true;
    return true;
  } else {
    return false;
  }
">