使用jQuery来防止重新提交表单 [英] Using jquery to prevent resubmitting form

问题描述

当用户单击提交按钮时，表单被提交通常情况下，但如果用户故意快速点击多次，它会多次提交，这会导致数据库中重复的数据。

这种问题的解决方案是什么？

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

解决方案

禁用提交按钮的确是要走的路。

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

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

1. 使用 setTimeout（）几毫秒后禁用该按钮，以便无论如何发送其名称 - 值对。 50美元是一个可承受的金额。
   
   

     $（form）。submit（function（）{
    var form = this; 
    setTimeout（function（）{
    $（'：submit'，form）.attr（'disabled'，true）; 
   }，50）; 
   }） ; 
     




2. 将实际按下的提交按钮的名称 - 值对复制到形成。这有点棘手，因为这些信息在< form> 的 submit 事件中不可用。您需要让 $（文档）捕获最后点击的元素。

    <$ c $提交（函数（）{
    $（'：submit'，this）.attr（'disabled'，true）; 
    $（this）.append（$ （'< input />'）。attr（{
    type：'hidden'，
    name：$ .lastClicked.name，
    value：$ .lastClicked.value 
   }））; 
   }）; 
    $ b $（document）.click（function（e）{
   e = e || event; 
    $ .lastClicked = e.target || e.srcElement; 
   }）; 
     

---

更新：根据您的更新情况：

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

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

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $

var form = this;
$ .post（'some / url'，function（data）{
//在回调结束时重新启用按钮
$（'：submit'，form）.attr（'disabled'，false）;
}）;
}）;

I use jquery's .submit() to intercept user's submit event, however I found a problem.

When the user single click the submit button, the form is submitted normally, but if a user deliberately fast click it multiple times, it will submit multiple times, which will cause duplicated data in the database.

What's the solution for this kind of problem ?

Update: Well, I see some of the advice said disabling the submit button. This should prevent the form being submitted multiple times, but the problem is the form element in my page isn't refreshed, if I disable it the user won't be able to submit it anymore, disabling it for 15s may work, but is this the right way to solve this problem ?

解决方案

Disabling the submit button is indeed the way to go.

However, in a lot of cases the server side logic to be executed depends on the presence of the name-value pair of the submit button in question in the request parameter map. Especially in server side component based MVC frameworks like MS ASP.NET and Sun JSF, but also in "simple" forms having more than one submit button. The name-value pair of the pressed submit button is mandatory to determine the action to be executed. Disabling the button would make its name-value pair to completely disappear in the request parameter map and the server side may not take any action or execute the wrong action.

There are basically 2 ways to go around this:

1. Use setTimeout() to disable the button after a few milliseconds so that its name-value pair get sent anyway. 50ms is an affordable amount.

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

2. Copy the name-value pair of the actually pressed submit button into a hidden input of the form. This is a bit trickier since this information isn't available in the submit event of the <form>. You need to let the $(document) capture the last clicked element.

   $("form").submit(function() {
       $(':submit', this).attr('disabled', true);
       $(this).append($('<input/>').attr({
           type: 'hidden',
           name: $.lastClicked.name,
           value: $.lastClicked.value
       }));
   });
   
   $(document).click(function(e) {
       e = e || event;
       $.lastClicked = e.target || e.srcElement;
   });
   

---

Update: as per your update:

Well, I see some of the advice said disabling the submit button. This should prevent the from submit multiple times, but the problem is the form element in my page isn't refreshed, if I disable it the user won't be able to submit it anymore, disabling it for 15s may work, but is this the right way to solve this problem ?

So you're actually firing an ajaxical request. You could just re-enable the button(s) in the callback handler of the jQuery's ajax function. Assuming you're using 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);
    });
});

这篇关于使用jQuery来防止重新提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！