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!
To disable just the submit button(s), you could do this: $('button[type=submit], input[type=submit]'). prop('disabled',true);
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With