Disabling forms with javascript on submit to prevent double submit

Question

I'd like to disable a form after it is submitted in order to prevent double submissions. Pretty standard use case I would think, but all of the examples I can find out there are flawed.

Everything I can find is based on disabling the submit button, but this doesn't prevent the form from being re-submitted if the user hits the enter key on the form, which is a pretty common approach.

I'm thinking about modifying one of the existing scripts out there to account for this, but before I reinvent the wheel, does anyone know of a script that already handles this properly that they're able to share? I'm really surprised there doesn't seem to be anything out there yet.

Is it possible to hit the enter key on the form to submit the form once all form elements are disabled? i.e. if a form has no submit elements can it be submitted by pressing enter? I didn't think you could do that. — Adam, Aug 31 '10 at 20:18
@Adam I suppose I could disable all fields, but so far I have been only disabling the submit. That's not a bad thought, I could just go the route of disabling everything. — William Jones, Aug 31 '10 at 20:22
possible duplicate of [Prevent double submission of forms in jQuery](http://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery) — CmajSmith, Nov 05 '14 at 00:43
@CmajSmith I would agree with the duplicate except that the other question is specifically for jQuery, whereas this user might want a vanilla solution. — Peter Olson, Nov 06 '14 at 01:56

score 4 · Accepted Answer · answered Aug 31 '10 at 20:15

4

You could create a boolean variable (or an object with a boolean member variable) and only submit the form when the variable is false. Something like:

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

Of course, you would have to call init following the page load, in whichever flavor you choose to do that (window.onload = ..., window.addEventListener(...), window.attachEvent(...), etc.).

answered Aug 31 '10 at 20:15

palswim

11,856
6
53
77

I'm having some trouble with your solution. Conceptually it makes clear sense, but when I implemented it, in practice I seem to be able to sneak in an extra click if I repeatedly slam the submit button as fast as I can. It's almost as if a second onsubmit is being initiated before the first has had time to set submit to true. However, when I stick in alerts, everything seems to be working as I would expect. – William Jones Sep 01 '10 at 02:19
Oddly enough, the double submit script works perfectly against the enter key. It's only using the mouse to click the submit button that double posts still slip through. – William Jones Sep 01 '10 at 02:54
Hmm, last piece of info, this repeated submit with mouse problem doesn't happen in latest Chrome or IE, only latest Firefox. Maybe I'm prepared to just accept this then as an obscure Firefox bug and write them off. – William Jones Sep 01 '10 at 02:57
@williamjones: Weird; I'll let you know if I find anything about that. – palswim Sep 01 '10 at 15:25

score 3 · Answer 2 · answered Aug 31 '10 at 20:18

3

http://jsfiddle.net/c2N4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

answered Aug 31 '10 at 20:18

Robert

21,110
9
55
65

score 0 · Answer 3 · answered Nov 05 '14 at 00:39

i've tried a lot of solutions but none of them worked for me. I used this one and it is working really fine:

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML/PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>

Disabling forms with javascript on submit to prevent double submit

3 Answers3