使用jquery防止重新提交表单

Question

我使用jquery的.submit()来拦截用户的提交事件，但是我发现了一个问题。

当用户单击提交按钮时，表单会正常提交，但如果用户故意快速单击多次，则会提交多次，这会导致数据库中的数据重复。

此类问题的解决办法是什么？

更新：嗯，我看到一些建议说禁用提交按钮。这应该可以防止表单被多次提交，但问题是我的页面中的表单元素没有刷新，如果我禁用它，用户将无法再提交它，禁用它 15 秒可能会起作用，但这是解决这个问题的正确方法吗？

Answer 1

禁用提交按钮确实是正确的方法。

然而，在很多情况下，要执行的服务器端逻辑取决于请求参数映射中所讨论的提交按钮的名称/值对的存在。特别是在基于服务器端组件的 MVC 框架（如 MS ASP.NET 和 Sun JSF）中，而且在具有多个提交按钮的“简单”表单中。按下的提交按钮的名称-值对是确定要执行的操作所必需的。禁用该按钮将使其名称-值对完全消失在请求参数映射中，并且服务器端可能不会采取任何操作或执行错误的操作。

基本上有两种方法可以解决这个问题：

1. 使用setTimeout()在几毫秒后禁用按钮，以便无论如何都会发送其名称-值对。 50ms 是一个可以承受的量。

   $("表单").submit(function() {
       var 形式 = this;
       设置超时（函数（）{
           $(':提交', 表单).attr('禁用', true);
       }, 50);
   });
   

2. 将实际按下的提交按钮的名称/值对复制到表单的隐藏输入中。这有点棘手，因为此信息在

   的 submit 事件中不可用。您需要让 $(document) 捕获最后单击的元素。

   $("表单").submit(function() {
       $(':提交', this).attr('禁用', true);
       $(this).append($('<输入/>').attr({
           类型：'隐藏'，
           名称：$.lastClicked.name，
           值：$.lastClicked.value
       }));
   });
   
   $(文档).click(函数(e) {
       e = e ||事件;
       $.lastClicked = e.target || e.srcElement;
   });
   

---

更新：根据您的更新：

嗯，我看到一些建议说禁用提交按钮。这应该可以防止多次提交，但问题是我的页面中的表单元素没有刷新，如果我禁用它，用户将无法再提交它，禁用它 15 秒可能会起作用，但这是吗？解决这个问题的正确方法是什么？

所以你实际上是在发出一个ajaxal请求。您只需在 jQuery 的 ajax 函数的回调处理程序中重新启用按钮即可。假设您正在使用 jQuery.post：

$("form").submit(function() {
    // Disable buttons here whatever way you want.

    var form = this;
    $.post('some/url', function(data) {
        // Re-enable buttons at end of the callback handler.
        $(':submit', form).attr('disabled', false);
    });
});

Answer 2

禁用 jQuery 函数中的“提交”按钮。

http://jquery-howto。 blogspot.com/2009/05/disable-submit-button-on-form-submit.html

Answer 3

尝试禁用表单提交上的提交按钮...

$("form").submit(function() {
    $(':submit',this).attr('disabled','disabled');
    $('selector').load(url,function(){
       $(':submit',this).removeAttr('disabled');
    })
});​

快速演示

Answer 4

真正的问题在于数据库层，它的设计必须防止重复。这是一个通用但有点丑陋的解决方案：

当您最初呈现页面时，您可以创建一个 GUID。比如说，操作 ID。并将其放入视图状态。当您在服务器端处理事件时，只需将此 guid 插入表中，例如 OngoingOperations，其中它是主键。第一个插入会成功，其他都会失败。当然，为了更加用户友好，您可以跳过后续操作并返回第一个操作的状态。

OngoingOperations 表可能如下所示：

CREATE TABLE OngoingOperations(
OperationID唯一标识符主键，
OperationDate日期时间默认getdate(),
操作状态 nvarchar（最大值）
）；

OperationStatus - 是状态消息或从后续提交返回给客户端的任何数据。在这里，您可以根据需要使用标志（可以或不行）或详细消息。

该表需要收集旧记录，假设每小时删除 2 小时或更长时间之前完成的操作。

安东·布尔采夫

Answer 5

试试这个：

$("form").submit(function() {
    var form = this;
    setTimeout(function() {
        $(':submit', form).attr('disabled', true);
    }, 50);

    setTimeout(function() {
        $(':submit', form).removeAttr('disabled');
    }, 1000);
});