Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 228
Odyss3us Avatar asked Apr 14 '10 07:04

Odyss3us


People also ask

How do I stop double submission?

To disable just the submit button(s), you could do this: $('button[type=submit], input[type=submit]'). prop('disabled',true);

How can stop double click on submit button in jquery?

attr('disabled', true). html("Processing...");" inside beforeSend() function on ajax. Then in the success() function on ajax a remove the disabled attribute/function so that the button will be clickable again after being submitted to the server.

How do I stop a submission in jquery?

We use the preventDefault() method with this event to prevent the default action of the form, that is prevent the form from submitting. Example: HTML.


1 Answers

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.

like image 195
Bill Paetzke Avatar answered Oct 10 '22 03:10

Bill Paetzke