Avoid multiple form submit in html

Question

I'm facing a sort of dummy problem.

On my site there is an order form (simple html form) and I noticed that I get double commands from time to time.

I realized that if I clicked repeatedly few times the submit button (before the action page is loaded) I got as many commands as I have clicked.

So I wonder if there are simple solution to make form submission asyncronous?

Thanks

P.S. I added JQuery UI dialog on submit "wait please..." but I get still double commands.

UPDATE

As GeoffAtkins proposed I will:

disable submit after dialog is shown
make use of unique form's token (as it is already added by Symfony) Do not use Symfony token as unique form token as it is always the same for current session. Use just random or something like that.

When you used the jQuery dialog, did you disable the submit button as well? And you really should post your code so we can help. Off the top of my head, you could have a unique ID in a hidden field (reset each time the form is loaded; using a timestamp for instance) and not allow multiple submissions with the same ID. — Geoff Atkins
– Geoff Atkins, Commented Jun 3, 2015 at 8:48
Actually there is nothing to post: imagine just simple html form with one input and one sumbit. But I'm dull! You proposed two good ideas: 1) disable sumit button! 2) I already have _token by Symfony! Thanks, I think it's resolved — VladRia
– VladRia, Commented Jun 3, 2015 at 8:51
I do not advise disabling the submit until after the submission - some browsers will stop the submission if the submit is disabled — mplungjan
– mplungjan, Commented Jun 3, 2015 at 8:57
@mplungjan Which browsers are these? Can you show this in a jsfiddle? I'm intreeged! — Relequestual
– Relequestual, Commented Jun 3, 2015 at 9:37

mplungjan · Accepted Answer · 2015-06-03 09:42:39Z

3

I would consider doing this (jQuery since you said you used that)

$(function() {
  $("#formId").on("submit",function() {
    $("#submitBut").hide();
    $("#pleaseWait").show();
  });
});

if you submit the form and reload the page.

If you Ajax the order, then do

$(function() {
  $("#formId").on("submit",function(e) {
    e.preventDefault();
    var $theForm = $(this);
    $("#submitBut").hide();
    $("#pleaseWait").show();
    $.post($(this).attr("action"),$(this).serialize(),function() {
      $theForm.reset();
      $("#submitBut").show(); // assuming you want the user to order more stuff
      $("#pleaseWait").hide();
    });
  });
});

NOTE that disabling the submit button on click of the submit button may stop the submission all together (at least in Chrome): https://jsfiddle.net/mplungjan/xc6uc46m/

edited Jun 3, 2015 at 9:42

answered Jun 3, 2015 at 8:51

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VladRia Over a year ago

no ajax, simple html. .ajax() function of JQuery has async parameter

cjhill · Accepted Answer · 2015-06-03 08:52:36Z

0

Just disable the button on click, something like:

$("#my-button-id").on("click", function() {
   $(this).attr("disabled", "disabled");
});

answered Jun 3, 2015 at 8:52

cjhill

1,0842 gold badges11 silver badges31 bronze badges

1 Comment

mplungjan Over a year ago

That may stop the form from being submitted!

Uma Kanth · Accepted Answer · 2015-06-03 08:53:30Z

0

var bool = true;
function onclick()
{
    if(bool)
    {
    //do stuff
    bool = false;
    }
    else
    {
    //ignore
    }
}

answered Jun 3, 2015 at 8:53

Uma Kanth

5,6292 gold badges22 silver badges43 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:44:30Z

0

You could disable the button on the form when it is clicked, and then continue to perform the action. You would probably change the text to say "loading..." or some such.

You may also want to re-enable the button on fail or complete of the ajax request.

I've done this many times similar to this: https://stackoverflow.com/a/19220576/89211

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jun 3, 2015 at 8:56

Relequestual

12.4k7 gold badges52 silver badges87 bronze badges

Collectives™ on Stack Overflow

Avoid multiple form submit in html

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related