当我单击 HTML 表单上的提交按钮时，会调用与该按钮相关的函数并开始工作。完成工作后会发送一封邮件通知，这会花费太多时间。之后在同一 HTML 页面上显示一条确认消息（不使用 Ajax；即刷新页面）。
我想避免让用户在发送邮件的等待期间多次单击提交按钮而感到困惑。所以我想我应该在按下一次按钮后禁用它。
我该怎么做？
您能否建议在不禁用按钮的情况下实现此目标的任何其他技术？
【问题讨论】：
标签： javascript html jsp
简单地说：
<form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
<input name="submit_button" type="submit" value="Submit" />
</form>
您可以在不禁用按钮的情况下通过使用 nonce 来实现这一点，但是它有点复杂。本质上，当用户请求包含将要提交的表单的页面时，为该用户的请求分配一个唯一的 id（将其存储在服务器上的某个位置，并确保它与表单一起提交）。然后提交表单时，查找唯一ID以确保它不在处理中或已处理，然后如果可以继续，将唯一ID标记为“处理中”，处理表单，然后将其标记为处理。如果在您进行初始检查并且页面正在处理或已处理时，您需要采取必要的操作（如果处理成功，则将其重定向到确认页面，如果处理不成功，则返回表单)。
【讨论】：
form.onsubmit 即使使用回车键也会被触发。你可能会想到<input type="submit" onclick="...">
我该怎么做？
你可以看看这个页面的javascript代码：
http://www.codinghorror.com/blog/archives/000096.html
<input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">
您能否建议任何其他技术以在不禁用按钮的情况下实现此目标？
显示一个忙碌的面板：
“...您的请求正在处理中，请稍候...”
（来源：vodafone.co.uk）
【讨论】：
<form action="file" method="post" onsubmit="this.submit_button.disabled = true;"> stackoverflow.com/questions/2067042/…
如果您在提交之前禁用按钮，则父表单将不会提交。您需要在提交后禁用按钮。使用 JavaScript 的 setTimeout() 函数的最佳方式。
<input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">
50ms 足以让表单有机会提交。
为了进一步增强用户体验，您当然可以在其他人已经建议的相同 onclick 事件期间动态附加消息或加载图像。
【讨论】：
假设您不想禁用该按钮，您可以随时在页面上弹出一个modal。这将阻止用户与页面的交互。您可以在其中抛出某种loading spinner 并显示提交正在进行中的消息。
【讨论】：
我不明白为什么会出现问题，因为您正在执行常规提交，当您在后端处理时，用户应该会看到一个白页。但是如果您想禁用该按钮，这是代码，在按钮上使用它
onclick="this.disabled=disabled"
【讨论】：
您可以禁用该按钮，但对用户来说仍然是活动的。在第一次按下按钮后调用的函数中，首先要设置一个像disableButton 这样的全局变量为true。当用户按下按钮时，让它转到一个名为checkSubmitStatus 的函数。如果disableButton = true，return false。 if disableButton = false，触发提交功能。
您仍然禁用了该按钮，但您的用户可以在不知不觉中按下。
【讨论】：
我没有提交任何内容，但 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)"/>
【讨论】：