Question

当我单击HTML表单上的提交按钮时，将调用与该按钮相关的功能，并且它可以正常工作。完成工作后，会发送邮件通知，这会消耗太多时间。之后，同一HTML页面上会显示一条确认消息（不使用Ajax;即刷新页面）。

我希望避免让用户在发送邮件的等待期间多次混淆提交按钮。所以我想我应该在按下按钮后禁用该按钮。

我该怎么做？

在没有禁用按钮的情况下，您能否建议任何其他技术来实现这一目标？

Answer 1

简单地：

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

您可以通过使用nonce禁用按钮来实现此目的，但它有点复杂。基本上，当用户请求具有将要提交的表单的页面时，为该用户的请求分配唯一的ID（将其存储在服务器上的某个位置，并确保它与表单一起提交）。然后在提交表单时，查找唯一ID以确保它未处理或已经处理，然后如果可以继续，将唯一ID标记为“正在处理”，处理表单，然后将其标记为处理。如果您在进行初始检查并且页面正在处理或已经处理时，您将需要采取必要的操作（如果成功处理，则将其重定向到确认页面，如果未成功处理，则返回到表单））。

Answer 2

我该怎么做？

您可以查看此页面中的javascript代码：

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

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

在没有禁用按钮的情况下，您能否建议任何其他技术来实现这一目标？

显示一个忙碌的面板：

“......您的请求正在处理中，请稍候......”

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 3

如果您在提交之前禁用了按钮，那么父表单将不提交。您需要在提交后禁用按钮。最好的方法是使用JavaScript的setTimeout()函数。

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

50ms的价格足以让表格有机会提交。

为了更好地增强用户体验，您当然可以在其他人建议的同一个onclick事件中动态附加消息或加载图像。

Answer 4

假设您不想禁用该按钮，您可以随时在页面上弹出modal。这将阻止用户与页面的交互。您可以在其中抛出某种loading 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)"/>

在等待结果时禁用HTML按钮

7 个答案: