如果用户中断重定向到新页面，则禁用的提交按钮保持禁用状态答案

【问题标题】：Disabled submit button remains Disabled if a user interrupts redirecting to a new page如果用户中断重定向到新页面，则禁用的提交按钮保持禁用状态
【发布时间】：2011-03-02 08:38:46
【问题描述】：

我想在使用 javascript 按下提交按钮后禁用它。

myForm.onsubmit = function() { ... mySubmitButton.disabled = true; ... }

但是当用户在当前页面仍然存在的情况下停止打开新页面时，按钮仍然处于禁用状态。

如果来自服务器的内容是文件，也会有同样的结果（在这种情况下不会重定向到新页面）。

有没有办法确定浏览器是否不再“想要”加载新 URL 并重新启用 mySubmitButton？

【问题讨论】：

这似乎有点矛盾。如果您禁用提交按钮以防止重新提交，那么这是所需的行为。如果用户在发送任何内容之前停止页面，但处理已经开始，那么再次提交表单将再次启动该处理。同样，如果文件是此类处理的结果，再次获取文件将要求再次提交表单。
我同意禁用提交按钮可以解决重新提交问题，但总是禁用按钮看起来有点奇怪。如果我们想显示“请稍候”消息，就会一直出现这个消息，让用户感到困惑。确定用户在按下提交按钮后停留在当前页面的情况也不错。
这是不可能的。如果您需要避免重复提交，那么您应该在服务器端执行此操作。
我已经为 IE 找到了解决这个问题的方法。它是定期检查 document.readyState != 'complete' 是否（应该在 onbeforeunload 之后启动）。其他浏览器似乎没有任何可能的解决方案。我尝试使用 window.onabort，但它不会在 Chrome 中触发。如果问题没有任何解决方案，则意味着在页面重定向期间阻止表单或显示任何“请稍候”消息是不正确的，因为在这种情况下我们会得到一个丑陋的界面。
您可以尝试发出AJAX请求来检查服务器是否真的收到了数据。

标签： javascript html double-submit-prevention

【解决方案1】：

我认为您可以使用 setTimeout 来调用重新启用按钮的函数。超时必须是一个合理的值，比如 5000 (5s)。我不记得 setTimeout/Interval 调用是不是在页面重定向之后执行的，所以先测试一下。

【讨论】：

【解决方案2】：

如果您确实需要在客户端完成所有操作，有几种方法可以做到这一点：

如果用户决定再次编辑，请尝试重新启用按钮，例如点击任何表单域。
正如@Adilson 所说，setTimeout 也是一个很好的解决方案，您无需等待几秒钟即可知道出了什么问题。
您也可以使用jQuery ajax调用提交表单，如果提交失败，可以返回重新启用按钮的命令。

我相信还有更多解决方案。我希望这 3 位能给你一个想法来解决你遇到的问题。

【讨论】：