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 mon 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.

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 mon 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.

• javascript
• double-submit-prevention

• 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 Commented Aug 31, 2010 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 Commented Aug 31, 2010 at 20:22
• possible duplicate of Prevent double submission of forms in jQuery – CmajSmith Commented Nov 5, 2014 at 0: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 Commented Nov 6, 2014 at 1:56

3 Answers 3

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.).

http://jsfiddle/c2N4v/

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

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>