Question

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

因此，如果用户提交表单，则在加载用户时按下＆＃34; esc＆＃34;或点击＆＃34;停止＆＃34;浏览器的按钮，我想调用一个函数，是否可能？

注意：我知道我们可以绑定＆＃34; esc＆＃34;按钮，但是如果用户停止了浏览器的提交＆＃34;停止/取消＆＃34;按钮？

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

修改

我知道我们可以使用XHR（json / ajax）帖子处理这个问题，但我正在寻找正常的表单提交。

我想要实现的目标就是：当用户按下＆＃34;提交＆＃34;按钮，我想禁用提交按钮。如果用户在加载时取消/停止了提交，则提交按钮仍将被禁用（如果提交被取消/停止，则应重新启用）。

编辑/改编 - 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); });时禁用提交按钮，这样可以解决问题，但会产生另一个问题：如果用户点击了＆＃34; esc＆＃34;或者在表单仍在提交时停止浏览器，提交按钮仍然会被禁用，用户无法再重新提交表单，我想在提交过程后立即重新启用提交按钮＆＃ 34;取消。有没有办法实现这个目标？像$(window).onStop(function() { ... });这样的东西？或表明提交过程已被中断（或仍在运行）的方式？

注意：

寻找客户端（javascript或jquery）解决方案。我知道可以通过服务器端检查相同的条目轻松解决，但我对服务器端解决方案不感兴趣。
问题可以用XHR（ajax / json）绑定解决（比如onSuccess，onFailure等）..但在这种情况下，我使用的是普通帖子，而不是XHR，所以请从你的答案中排除XHR
解决方案必须为5个主流浏览器（IE，FF，Chrome，Safari，Opera）解决至少的问题。
有人可能会建议我们绑定＆＃34;按键＆＃34;对于＆＃34; esc＆＃34;按钮，所以当用户按下＆＃34; esc＆＃34;我们重新启用提交按钮。这很好，但那是半解决方案。如果用户停止提交过程＆＃34;该怎么办？通过浏览器的停止按钮，有没有办法指示已单击此停止按钮？

Answer 1

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

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

我实际上看了一会儿，却找不到怎么做但也许有人可以提供答案并启发我们两个。现在，让我们把第二只大象赶出房间。

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

事实上，我们能够在处理某些请求时执行所谓的异步操作（就像“Ajax”中的第一个“A”）。让我们看看第3只大象

我有哑/缺乏经验/ 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事件，但其他浏览器似乎不支持这种情况。请注意，当用户单击“停止”或点击Esc时会触发它，或者如果用户在页面加载期间导航到另一个页面，则会触发，这会产生相同的效果。

我不相信在其他浏览器中单击“停止”时触发事件的可靠方法。也许有可能做类似的事情：保持与服务器的连接打开（如Comet方法），在连接上流式传输某种保持活动状态，并检测流是否结束（正如我认为的那样，如果点击停止按钮。）

来自：Any javascript event occuring when user clicks Stop load button?

Answer 3

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

＆＃34;整个想法是阻止用户点击＆＃34;提交＆＃34;按键不止一次，因此用户不要两次或更多次提交相同的表单。＆＃34;

然后你可能会有一个wasNeverSubmitted标志，并在第一个表单提交后将其设置为true。

最后，您为每个表单提交检查此标记，如果为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 */
  }

});

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

3 个答案:

我的回答