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, Jun 03 '15 at 08: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, Jun 03 '15 at 08:51
I do not advise disabling the submit until after the submission - some browsers will stop the submission if the submit is disabled — mplungjan, Jun 03 '15 at 08:57
@mplungjan Which browsers are these? Can you show this in a jsfiddle? I'm intreeged! — Relequestual, Jun 03 '15 at 09:37
@GeoffAtkins Consider moving your comment to an answer so it can be accepted as the used answer? =] — Relequestual, Nov 19 '15 at 14:15

mplungjan · Accepted Answer · 2015-06-03T09:42:39.480

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/

no ajax, simple html. .ajax() function of JQuery has **async** parameter — VladRia, Jun 03 '15 at 08:58

score 0 · Answer 2 · answered Jun 03 '15 at 08:52

0

Just disable the button on click, something like:

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

answered Jun 03 '15 at 08:52

cjhill

1,004
2
9
31

1

That may stop the form from being submitted! – mplungjan Jun 03 '15 at 08:54

score 0 · Answer 3 · answered Jun 03 '15 at 08:53

0

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

answered Jun 03 '15 at 08:53

Uma Kanth

5,659
2
20
41

score 0 · Answer 4 · edited May 23 '17 at 11:44

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 '17 at 11:44

Community

1
1

answered Jun 03 '15 at 08:56

Relequestual

11,631
6
47
83

Avoid multiple form submit in html

4 Answers4