How to disable a submit button after one click?

Question

I have this form inside a div and the submit button inside another div.

<div class="container1">
        <form name="reg-form" id="signup" action="" method="post">      
            <div class="sep"></div>
            <div class="inputs">
                <input type = "submit" id="submit" name="submitkey" value="GENERATE KEY" />
            </div>

        </form>         
    </div>

How would I disable the submit button after one click? I tried every javascript code I find but it doesn't work on me. I dont know if it is because the form is inside a div and the submit button is inside another div. Thank you.

Answer 1

document.getElementById('signup').onsubmit = function() {
    document.getElementById('submit').disabled = true;
};

Demo

The code should be put under the script, or wrapped inside a DOMContentLoaded / window.onload handler. Make sure your HTML does not have duplicated IDs.

Also, if the button must stay disabled after a page refresh/form submission, you will need cookies or a server-side session. None of these methods are foolproof though, and this is outside of the scope of the question I believe.

Answer 2

If you have jquery you can use this code:

$('#signup').submit(function(){
    $('#submit').attr('disabled', 'disabled');
});