How to reject same form submission made by missclick

Question

I could reject the form by checking either the CSRF token or by adding some other token to my DB and check if that was already used, but I was wondering if there seems to be an easier way to handle this with javascript (using jquery would be acceptable)?

I want to avoid concurrency of two/three event submissions. Disabling the button/form with on click and submit events did not work.

Example:

$("#request-form").submit(function() {
   $(this).attr('disable', true);
});
$('#btn_modal_submit').on('click', function() {
   $(this).attr('disable', true);
});

Why didn't disabling the button/form work? That seems like standard practice to me — larz, Nov 03 '17 at 15:13
@larz, I was still able to click quickly in the button and it was sending multiple requests. — renno, Nov 03 '17 at 15:20

Brian Mains · Accepted Answer · 2017-11-03T15:33:43.050

The attribute needed is disabled, not disable, and it's OK to target the current object - but you may want to consider disabling all of the buttons on the form like so (assuming they are all "button" type):

$("#request-form").submit(function() {
   $("button").attr("disabled", "disabled");
});
$('#btn_modal_submit').on('click', function() {
   $("button").attr("disabled", "disabled");
});

Or using the prop("disabled", true) function. For additional reference: https://stackoverflow.com/a/6048113/231716

I targeted the button control directly which would indicate to disable all buttons and prevent accidental clicking until the correct form posts back. You probably don't need to attach to both form submit and button click, but that will depend on the behavior of the application. Also, if not a true postback, such as an AJAX postback, you can combine that with window.setTimeout to re-enable the button.

put an alert("HERE") in each to verify these are being called in the first place... — Brian Mains, Nov 03 '17 at 15:34
I was using the label tag to submit the form, because I was using a modal... Disabling the real button/input (type="submit") made it work. thanks — renno, Nov 03 '17 at 16:03

score 1 · Answer 2 · answered Nov 03 '17 at 15:32

1

You could use .one() instead of .on() for submitting the form on click.

$('#btn_modal_submit').one('click', function(){
    $("#request-form").submit();
});

http://api.jquery.com/one/

answered Nov 03 '17 at 15:32

Jimmy

2,669
1
17
21

The button is being called once, but the form is being called multiple times – renno Nov 03 '17 at 15:37

How to reject same form submission made by missclick

2 Answers2