javascriptdouble-submit-prevention

Disabling forms with javascript on submit to prevent double submit


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.


Solution

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