CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Odyss3us
Odyss3us

Reputation: 6635

How can I prevent a double submit with jQuery or Javascript?

I keep getting duplicate entries in my database because of impatient users clicking the submit button multiple times.

I googled and googled and found a few scripts, but none of them seem to be sufficient.

How can I prevent these duplicate entries from occurring using javascript or preferably jQuery?

Thanx in advance!

Upvotes: 21

Views: 40330

Answers (10)

Avatar
Avatar

Reputation: 15176

Found at How to prevent form resubmission when page is refreshed (F5 / CTRL+R) and solves the problem:

    <script>
        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }
    </script>

Upvotes: 0

Jim Schmehil
Jim Schmehil

Reputation: 7049

Here is bit of jQuery that I use to avoid the double click problem. It will only allow one click of the submit button.

$(document).ready(function() {
  $("#submit").on('click', function() {
  });
});

Upvotes: 2

Changaco
Changaco

Reputation: 790

This is what I came up with in https://github.com/liberapay/liberapay.com/pull/875:

$('form').on('submit', function (e) {
    var $form = $(this);
    // Check that the form hasn't already been submitted
    if ($form.data('js-submit-disable')) {
        e.preventDefault();
        return false;
    }
    // Prevent submitting again
    $form.data('js-submit-disable', true);
    // Set a timer to disable inputs for visual feedback
    var $inputs = $form.find(':not(:disabled)');
    setTimeout(function () { $inputs.prop('disabled', true); }, 100);
    // Unlock if the user comes back to the page
    $(window).on('focus pageshow', function () {
        $form.data('js-submit-disable', false);
        $inputs.prop('disabled', false);
    });
});

Upvotes: 1

Nikola Petkanski
Nikola Petkanski

Reputation: 4794

Preventing the double posting is not so simple as disabling the submit button. There are other elements that may submit it:

  • button elements
  • img elements
  • javascripts
  • pressing 'enter' while on some text field

Using jQuery data container would be my choice. Here's an example:

$('#someForm').submit(function(){
    $this = $(this);

    /** prevent double posting */
    if ($this.data().isSubmitted) {
        return false;
    }

    /** do some processing */

    /** mark the form as processed, so we will not process it again */
    $this.data().isSubmitted = true;

    return true;
});

Upvotes: 9

nulltek
nulltek

Reputation: 3337

I'm not sure what language/framework you're working with or if it's just straight HTML. But in a Rails app I wrote I pass a data attribute on the form button disable_with which keeps the button from being clickable more than once while the transaction is in process.

Here's what the ERB looks like.

<%= f.button "Log In", class: 'btn btn-large btn-block btn-primary', data: {disable_with: "<i class='icon-spinner'></i>Logging In..."} %>

Upvotes: 1

Edward Brey
Edward Brey

Reputation: 41648

If you are using client-side validation and want to allow additional submit attempts if the data is invalid, you can disallow submits only when the form content is unchanged:

var submittedFormContent = null;
$('#myForm').submit(function (e) {
    var newFormContent = $(this).serialize();
    if (submittedFormContent === newFormContent)
        e.preventDefault(true);
    else 
        submittedFormContent = newFormContent;
});

Upvotes: 0

Jon
Jon

Reputation: 377

The problem with the method described here is that if you're using a javascript validation framework and the validation fails, you won't be able to correct and re-submit the form without refreshing the page.

To solve this, you need to plug into the success event of your validation framework and only then, set the submit control to disabled. With Parsley, you can plug into the form validated event with the following code: 

$.listen('parsley:form:validated', function(e){
    if (e.validationResult) {
        /* Validation has passed, prevent double form submissions */
        $('button[type=submit]').attr('disabled', 'disabled');
  }
});

Upvotes: 0

Flynn1179
Flynn1179

Reputation: 12075

One technique I've seen used is to assign a unique ID to every form that's opened, and only accept one submission per form based on the ID.

It also means you can check how many times people aren't bothering to submit at all, and you can check if the submission genuinely came from your form by checking if it's got an ID that your server created.

I know you asked for a javascript solution, but personally I'd do both if I needed the robustness.

Upvotes: 7

Bill Paetzke
Bill Paetzke

Reputation: 13572

How about disabling the button on submit? That's what I do. It works fine.

$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

Disclaimer:
This only works when javascript is enabled on the user's browser. If the data that's being submitted is critical (like a credit card purchase), then consider my solution as only the first line of defense. For many use cases though, disabling the submit button will provide enough prevention.

I would implement this javascript-only solution first. Then track how many duplicate records are still getting created. If it's zero (or low enough to not care), then you're done. If it's too high for you, then implement a back-end database check for an existing record.

Upvotes: 33

Sarfraz
Sarfraz

Reputation: 382696

This should do the trick:

$("form").submit(function() {
   $(":submit", this).attr("disabled", "disabled");
});

No JQuery?

Alternatively, you can make a check from db to check if a record already exist and if so, don't insert new one.

Upvotes: 9

Related Questions