Disable HTML button pending result

Question

When I click the submit button in my HTML form, the function associated with the button is called and it does its job. After completion of work, a notification is sent by mail, which consumes too much time. After that, a confirmation message is displayed on the same HTML page (without using Ajax, that is, the page is being updated).

I want the user to not press the send button several times in confusion during the waiting period for sending emails. Therefore, I think I should turn off the button after pressing it once.

How can i do this?

Can you offer any other technique to achieve this without turning off the button?

Answer 1

How can i do this?

You can see the javascript code on this page:

http://www.codinghorror.com/blog/archives/000096.html

<input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">

Can you offer any other technique to achieve this without turning off the button?

Show busy panel:

"... Your request is being processed, please wait ..."

http://online.vodafone.co.uk/en_GB/assets/static/ipi_please_wait.gif http://online.vodafone.co.uk/en_GB/assets/static/ipi_please_wait.gif

Answer 2

Simply:

<form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
    <input name="submit_button" type="submit" value="Submit" />
</form>

, , nonce, . , , ​​, ( - , ). , , , , , , "in process", . , , ( , , , ).

Answer 3

, . . JavaScript setTimeout() .

<input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">

50 , .

, , onclick, .

Answer 4

, , modal . . - spinner , .

Answer 5

, , , . , ,

onclick="this.disabled=disabled"

Answer 6

, . , , , , disableButton true. , , checkSubmitStatus. disableButton = true, return false. if disableButton = false, .

, .

Answer 7

, Google Chrome 31 , :

<style>
.btnMenu{width:70px; font-size:12px}
.btnMenu:disabled{background-color:grey}
</style>
<input type="button" class="btnMenu" value="Total" onmousedown="b=this; b.disabled=true; b.v=b.value; b.value='Calculating...'; setTimeout('updateTotals(); b.value=b.v; b.disabled=false', 100)"/>