CODEWITHSUNDEEP
mysqlforms
GeekedOut
GeekedOut

Reputation: 17185

Best way to prevent double form submits with text areas

I have a form with a text area. Some people double-click on the submit button, and even though I put up a "please wait" kind of message after a submit, some people still manage to do a double-submit.

The problem with text areas is that I can't make that column unique in the database, so my question is - how can I make sure these forms don't get submitted into the db twice.

And even if they get into the db sometimes, how do I prevent them from being displayed? Maybe the ladder is the better option?

Thanks!

Upvotes: 2

Views: 152

Answers (4)

alex
alex

Reputation: 490667

You could use a bit of JavaScript...

var submitted = false;
document.querySelector('form').addEventListener('submit', function(event) {
    if (submitted) {
        event.preventDefault();
    }
    submitted = true;
    this.querySelector('input[type="submit"]').disabled = true;

}, false);

jsFiddle.

(of course, check the compatibility of these methods.)

If you happen to use jQuery...

var submitted = false;
$('form').submit(function(event) {
    if (submitted) {
        event.preventDefault();
    }

    submitted = true;
    $(this).find(':submit').prop('disabled', true);

});

jsFiddle.

Upvotes: 1

return1.at
return1.at

Reputation: 3140

for a UI solution with jQuery, use something like

$("#foo").one("click", function() {
  console.log("This will be displayed only once.");
});

see .one()

this solves the double submit problem as quickly as possible. If you rely on unique submits on the backend, go for the unique identifier as hidden field.

Upvotes: 2

Kae Verens
Kae Verens

Reputation: 4077

disable the submit button after the first click.

for example, if you were using jQuery, you could have something like this:

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

Upvotes: 2

Mark Byers
Mark Byers

Reputation: 839264

Use a hidden field that contains a unique identifier.

And even if they get into the db sometimes

If you store the unique identifier in the database and add a "UNIQUE INDEX" to that column then they won't get into the database in the first place.

Upvotes: 3

Related Questions