表格 - 停止双提交

Question

所有：

我正在使用jquery / mvc / knockout开发一个Web应用程序，该应用程序正在使用$ .post获取数据并将其发布到服务器中。

我不希望用户“双击”或不耐烦，然后单击两次。 除了UI的线索，发生了一些事情，我想出了一种我认为可以达到这个目的的方法，但我想确保这样做没有任何警告或隐藏的危险。

下面是一个JSFiddle，它使用setTimeout模仿“通过ajax提交”请求。 我将函数“alreadyClicked”的内部字段设置为true，运行“ajax request”，然后在后处理完成后将其设置为false。 如果你去下面的小提琴，并有一个支持console.log的调试工具（一个la firefox），你可以点击疯狂，看着它进入方法，当它跳过这样做。

http://jsfiddle.net/puhfista/vVUCm/7/

感谢您对此主题的任何建议，您感觉要渲染。

Answer 1

你为什么不这样做：

$("<your element selector>").click(function(){
    $(this).attr('disabled', 'disabled');
    //  do your postback here
});

只需忘记在回发完成后重新启用元素

Answer 2

您可以使用此插件在正在处理时阻止表单提交。

http://www.malsup.com/jquery/block/

Answer 3

你在问题中提到你在这个项目中使用了淘汰赛。 实现你想要的东西的淘汰方式是在你的视图模型中声明一个名为“isPosting”的observable：

self.isPosting = ko.observable(false);

在提交按钮的html中，数据绑定到此observable：

<button data-bind="click:doPost, disable: isPosting">Submit</button>

在“doPost”单击处理程序中，您需要在发布帖子时将isPosting设置为true，并在完成后将其设置为false。

Answer 4

@DimitryV：这不是一个好的解决方案。 您可以更好地键入提交事件，以便捕获诸如用户按Enter以提交表单之类的内容。

$("form").submit(function () {
    $(this).attr('disabled', 'disabled');
    //  do your postback here
});

通过这种方式，您可以捕获所有提交。 同样值得注意！