表格 - 停止双提交

时间:2012-08-05 15:00:04

标签: javascript jquery ajax

所有

我正在使用jquery / mvc / knockout开发一个Web应用程序,该应用程序正在使用$ .post获取数据并将其发布到服务器中,这是一个相当昂贵的事务。

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

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

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

感谢有关此主题的任何建议,您感觉要渲染。

4 个答案:

答案 0 :(得分:1)

你为什么不这样做:

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

只是不要忘记在回发完成后重新启用元素

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

self.isPosting = ko.observable(false);

在提交按钮的html中,数据绑定到此可观察对象:

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

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

答案 3 :(得分:0)

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

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

通过这种方式,您可以捕获所有提交内容。同样值得注意!