Using jquery to prevent resubmitting form

Question

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 ?

Answer 1

Disable the Submit button in the jQuery function.

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

Answer 2

try disabling the submit button on form submit....

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

quick demo

Answer 3

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);
    });
});

Answer 4

Hello,

The real problem lies at database layer it must be designed to prevent duplications. here is a universal but a bit ugly solution:

When you initially renders a page you can create a GUID. Say, operation ID. and put it into a viewstate. When you processing an event on server side just insert this guid in a table, say OngoingOperations where it is a primary key. The first insertion will succeed, other will fail. Of cource, to be more user-friendly you can just skip subsequent operations and return status of the first one.

The OngoingOperations table may look as follows:

CREATE TABLE OngoingOperations( OperationID uniqueidentifier primary key, OperationDate datetime default getdate(), OperationStatus nvarchar(max) );

OperationStatus - is status message or any data to return to client from subsequent submissions. Here you can use a flag (ok or not) or a detailed message - as you wish.

this table requires collection of old records, say every hour you just delete operations with that completed 2 or more hours before.

Anton Burtsev