在等待结果时禁用HTML按钮

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>

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