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

Question

我发现了这个问题,但没有回答:是否有一个jQuery事件我可以监控表单提交是否被取消？

因此,如果用户提交表单,当它加载用户按下"esc",或点击浏览器的"停止"按钮时,我想调用一个函数,是否可能？

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

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

编辑:

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

我想要实现的就是:当用户按下"提交"按钮时,我想禁用提交按钮.如果用户在加载时取消/停止提交,则仍将禁用提交按钮(如果提交被取消/停止,则应重新启用).

---

编辑/改编 - 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"按钮,因此当用户按"esc"时,我们会重新启用提交按钮.这很好,但那是半解决方案.如果用户通过浏览器的停止按钮停止"提交过程",有什么方法可以指示已单击此停止按钮？

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)