Preventing double HTTP POST

Question

I have made a little app for signing up for an event. User input their data and click "sign me in".

Now sometimes people are double in the database, the exact same data that got inserted 2 times very quickly after each other. This can only mean someone clicked the button twice, which caused two posts to happen.

This is common web problem, as credit card apps and forum apps often say: "Clicking once is enough!".

I guess you could solve it by checking for the exact same data to see if the post is unique, but I wonder if there are other methods.

This ofcourse does not count for ASP.NET webforms, because POST doesn't matter as much.

Answer 1

A user-side solution is to disable the submission button via Javascript after the first click.

It has drawbacks, but I see it often used on e-commerce websites.

But, it won't never replace a real server-side validation.

Answer 2

Client side alteration is a common technique:

• Disable submit button
• Change the screen to a "please wait" screen
• If the form was modal, changing the screen back to their usual process (this has the benefit of making things look really slick)

But it's not perfect. It all relies on JS being available and if that's not the case, without back-end duplication detection, you'll get duplicates still.

So my advice is to develop some sort of detection behind the scenes and then improve your form to stop people with JS being able to double-submit.

Answer 3

You can track the number of times the form's been submitted and compare it to the number of unique visits to the page with the form on it in the session.

Answer 4

Most of the answers so far have been client-side. On the server-side, you can generate a hidden field with a GUID when you first produce the form, and then record that GUID as a submitted form when the post is received. Check it before doing any more processing.

Answer 5

Client side techniques are useful, but you may want to couple it with some server side techniques.

One way to do this is to include a unique token in the form (e.g. a GUID or similar), so that when you come to process the form you can check to see whether the token has already been used, preventing a double submission.

In your case, if you have a table with event visitors, you might include this token as a column.

Answer 6

While JavaScript solutions can disable the submit button after it has been clicked, this will have no effect on those people who have JavaScript disabled. You should always make things work correctly without JavaScript before adding it in, otherwise there's no point as users will still be able to bypass the checks by just disabling JavaScript.

If the page where the form appears is dynamically generated, you can add a hidden field which contains some sort of sequence number, a hash, or anything unique. Then you have some server-side validation that will check if a request with that unique value has already come in. When the user submits the form, the unique value is checked against a list of "used" values. If it exists in the list, it's a dupe request and can be discarded. If it doesn't exist, then add it to the list and process as normal. As long as you make sure the value is unique, this guarantees the same form cannot be submitted twice.

Of course, if the page the form is on is not dynamically generated, then you'll need to do it the hard way on the server-side to check that the same information has not already been submitted.

Answer 7

Beside the many good techniques already mentioned, another simple server-side method, that has the drawback of requiring a session, is to have a session variable that is switched off on the first submit.

Answer 8

A client-only solution won't be enough, as stated in many of the answers here. You need to go with a server-side fail-safe.

An often overlooked reason that disabling the submit button doesn't work is, the user can simply refresh the submit target (and click OK on the "are you sure you want to resubmit the POST data?" dialog). Or even, some browsers may implicitly reload the submitted page when you try to save the page to disk (for example, you're trying to save a hard-copy of an order confirmation).

Answer 9

Almost no one has js disabled. Think about coding your e-commerce website for the 70 year old woman who double clicks every link and button. All you want to do is add a javascript to prevent her clicking "Order Now" twice. Yes - check this at the server side too "be defensive" - but don't code for that case. But for the sake of a better UI do it on the client side too.

Here are some scripts that I found:

//
// prevent double-click on submit
//
  jQuery('input[type=submit]').click(function(){
    if(jQuery.data(this, 'clicked')){
      return false;
    }
    else{
      jQuery.data(this, 'clicked', true);
      return true;
    }
  });

and

// Find ALL <form> tags on your page
$('form').submit(function(){
    // On submit disable its submit button
    $('input[type=submit]', this).attr('disabled', 'disabled');
});