Jquery:如何处理"停止/取消”;用户停止表单提交时的事件

Jquery: how to handle "stop/cancel" event when user stops form submit?

本文关键字：用户 取消 表单提交 事件 停止 何处理 处理 Jquery quot      更新时间：2023-09-26

我发现了这个问题，但没有得到回答：如果表单提交被取消，是否有jQuery事件可以监视？

所以，如果用户提交了一个表单，在加载时，用户按下了"esc"，或者点击了浏览器的"停止"按钮，我想调用一个函数，这可能吗？

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

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

编辑：

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

简单地说，我想实现的是：当用户按下"提交"按钮时，我想禁用提交按钮。如果用户在加载时取消/停止了提交，则提交按钮仍将被禁用（如果提交被取消/停止，则应重新启用）

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

我的问题与此类似：如果表单提交被取消，是否有jQuery事件可以监视？

例如，我有这样的表格：

<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"时，我们会重新启用提交按钮。这很好，但这只是解决方案的一半。如果用户通过浏览器的停止按钮停止了"提交过程"，有没有办法表明这个停止按钮已经被点击

最后，这个问题实际上分解了复杂的问题，因此可以分部分解决

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

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

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

事实上，我们能够在处理某个请求时进行处理，这就是所谓的异步（就像"Ajax"中的第一个"a"）。让我们看看第三个大象

  • 我有愚蠢/缺乏经验/点击率高的用户，他们可能会意外地在服务器上创建不一致（即：不需要的重复）。我们应该提供一种机制来阻止这种事件的发生

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

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

问题，用户不知道（他当然不需要知道）服务器是否已经有完整的头并正在处理请求。服务器可以侦听客户端是否中止，但。。。

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

现在，你的问题有一堆大漏洞，由于你不希望你的请求是异步的，而且没有办法可靠地听取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)

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

我认为没有可靠的方法可以在其他浏览器中单击"停止"时触发事件。也许可以做一些类似的事情：保持与服务器的连接打开（如Comet方法），流式传输某种保持活动的连接，并检测流是否结束（我认为如果单击"停止"按钮会结束）。

From：当用户单击"停止加载"按钮时，是否发生任何javascript事件？

我的回答是基于在他的问题中添加的注释hanzo2001：

整个想法是防止用户单击"提交"按钮不止一次，所以用户不会提交两次或更多次相同的表单。"

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

最后，您应该为每个表单提交检查此标志，如果为true，则取消表单提交，查看如何对此问题执行禁用HTML页面上所有表单的提交功能

代码如下所示：

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 */
  }
});
相关文章：