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

Question

Hi guys, 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!

Answer 1

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.

Answer 2

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.

Answer 3

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").one('click', function() {
  });
});