Jquery：当用户停止表单提交时如何处理“停止/取消”事件？

Question

我找到了这个问题，但没有回答：Is there a jQuery event that I can monitor if form submission is cancelled?

所以如果用户提交一个表单，而它正在加载用户按下“esc”，或者点击浏览器的“停止”按钮，我想调用一个函数，有可能吗？

注意：我知道我们可以绑定“esc”按钮，但是如果用户通过浏览器的“停止/取消”按钮停止提交呢？

是否有 JavaScript 或 jquery 可能的解决方案？

编辑：

我知道我们可以通过 XHR (json/ajax) 帖子处理这个问题，但我正在寻找一个正常的表单提交。

我想要实现的只是：当用户按下“提交”按钮时，我想禁用提交按钮。如果用户在加载过程中取消/停止提交，提交按钮仍将被禁用（如果提交被取消/停止，则应重新启用）。

---

编辑/改写 - 2013 年 12 月 16 日：

我的问题类似这样：Is there a jQuery event that I can monitor if form submission is cancelled?

例如，我有这个表格：

<form method="post" enctype="multipart/form-data">
    <input type="file" name="imginput" value=""/>
    <input type="text" name="textinput" value=""/>
    <input type="button" id="submitbtn" value="Submit"/>
</form>

问题场景如下：

新手用户填写表单，然后双击提交按钮。相同的表单值被插入服务器两次！

努力实现：

我想用$('#submitbtn').bind('click', function() { $(this).attr('disabled','disabled'); $(this).prop('disabled', true); });禁用点击提交按钮，这解决了问题，但产生了另一个问题：如果用户点击“esc”或在表单仍在提交时停止浏览器，提交按钮仍然是禁用并且用户不能再重新提交表单，我想在“提交过程”被取消后立即重新启用提交按钮。有没有办法做到这一点？类似：$(window).onStop(function() { ... });？或者一种方式来表明提交过程已被中断（或仍在运行）？

注意事项：

• 正在寻找客户端（javascript 或 jquery）解决方案。我知道可以通过服务器端检查相同条目轻松解决此问题，但我对服务器端解决方案不感兴趣。
• 可以通过 XHR (ajax/json) 绑定（如 onSuccess、onFailure 等）解决问题。但在这种情况下，我使用的是普通帖子，而不是 XHR，因此请从您的答案中排除 XHR。
• 解决方案必须至少解决 5 种主流浏览器（IE、FF、Chrome、Safari、Opera）的问题。
• 可能有人建议我们为“esc”按钮绑定“keypress”，所以当用户按下“esc”时，我们重新启用提交按钮。这很好，但这是半解决方案。如果用户通过浏览器的停止按钮停止了“提交过程”，有没有办法表明这个停止按钮被点击了？

Answer 1

最后，这个问题实际上分解了复杂的问题，因此可以部分解决，因为它应该是。首先，让我们把大象赶出房间：

• 没有跨浏览器解决方案可以检测用户何时点击停止/（参考）按钮

我实际上查找了一段时间，但找不到如何做到这一点，但也许有人可以提供答案并启发我们俩。现在，让我们把第二只大象赶出房间。

• 不允许 Ajax 请求（出于某种原因）。一旦用户点击了提交按钮并且实际的提交事件触发了，我们就STUCK

事实上，我们能够在处理某些请求时做一些事情，这就是所谓的异步（就像“Ajax”中的第一个“A”）。让我们看看第三头大象

• 我有愚蠢的/没有经验的/clickety-clackety/abusers 用户，他们可能会在服务器上意外地创建不一致（即：不需要的重复）。我们应该提供一种机制来阻止此类事件。

当然，禁用按钮是解决这种困境的最简单方法。我们捕获提交，放入一行以禁用该表单的任何进一步提交事件。完毕。下一头大象会进来吗？

• 该过程已经开始，用户看到进度指示器在旋转并意识到他刚刚搞砸了。他想阻止它，见鬼！他需要阻止它。

问题，用户不知道（而且他肯定不需要知道）服务器是否已经拥有完整的标头并正在处理请求。服务器可以监听客户端是否中止但是...

• 用户点击了停止按钮！服务器是否处理了请求？服务器转储了吗？我的数据进入数据库了吗？哦，现在我有一个无法使用的禁用表格，我不知道我的所作所为是否有后果。刷新一下怎么样？

现在你的问题有一堆大漏洞，因为你不希望你的请求是异步的，并且没有办法可靠地监听browser.onStop。

我的答案

换个思路。

• 你害怕不一致。解决方案：先禁用提交事件

• 您的用户愚蠢/缺乏经验。解决方法：大红标Warning: do not press the stop button during the process, or navigate away from the page until the request has completed。

• 您的用户很担心。解决方法：添加一个警告You may edit your post/info in another page once the request has completed. (some instructions to find the edit page)

• 您的服务器（或慢速连接）完成时间过长，用户可能不耐烦。解决方案：在触发提交之前设置一个超时事件，它将... 但是等待！请求是同步的，这意味着在完成之前无法进行任何其他操作。 Dear User: this process may take a while. If after X mins you have not been redirected to this/page.html please... (do something/more instructions)

• 如果您想要更高级别的交互性，请采纳所有这些建议并开始使用 Ajax，让您的用户了解尝试中止请求的危险，并为他们提供事后编辑的选项。

• 遵循其他服务的示例。许多公司在付款过程中非常强烈地警告要耐心等待流程完成并添加一些说明以防万一出现问题并且用户担心。

• 考虑对交互性添加限制，某些流程并不意味着交互性（付款、唯一条目...）

• 如果您担心用户会让自己陷入禁用表单，请向他添加一些信息。 If you tried to stop the procedure please follow this link to see if it was processed, if it wasn't you will be redirected to this form again (you may want to save the users form data so he doesn't have to start over)

Answer 2

Internet Explorer 有一个 document.onstop 事件被触发，但其他浏览器似乎不支持该事件。请注意，当用户单击 Stop 或按 Esc 时，或者用户在页面加载期间导航到另一个页面时会触发它，这具有相同的效果。

我认为在其他浏览器中单击停止时没有可靠的方法来触发事件。也许可以执行以下操作：保持与服务器的连接打开（如在 Comet 方法中），在连接中传输某种保持活动状态，并检测流是否结束（我假设如果停止按钮被点击）。

发件人：Any javascript event occuring when user clicks Stop load button?

Answer 3

我的回答基于他的问题中添加的评论hanzo2001：

“整个想法是阻止用户点击“提交”按钮 不止一次，因此用户不会两次或多次提交相同的表单。”

那么您可能有一个wasNeverSubmitted 标志，并在第一次提交表单后将其设置为true。

最后你会为每一个表单提交检查这个标志，如果为真，那么你取消表单提交，看看如何在这个问题上做到这一点Disable submit functionality for all forms on a HTML page

---

代码如下所示：

HTML：

<form class="js-form-submit-once">

  /* .. form elements here*/

</form>

Javascript（需要 jQuery）：

var wasNeverSubmitted = true; 

$('js-form-submit-once').on('click', function(){

  if( wasNeverSubmitted ){
    wasNeverSubmitted = false;
    /* ... do nothing, let it submit */
  }
  else {
    return false;  /* cancels form submission */
  }

});