javascriptjqueryhtmlforms

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!


Solution

  • 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.