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.

have you got an example of the javascript you're using so far? — danblundell, Mar 06 '14 at 16:40
Have you tried disabling the input after the first submit? Maybe with an attribute `onClick` on your submit element? — Aliou, Mar 06 '14 at 16:40
http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript — mimipc, Mar 06 '14 at 16:43

score 1 · Answer 1 · answered Mar 06 '14 at 19:36

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.

score 0 · Answer 2 · answered Mar 06 '14 at 16:40

0

If you have jquery you can use this code:

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

answered Mar 06 '14 at 16:40

dbers

608
5
16

1

from > 1.6, `.prop()` is preferred way so you should use `$('#submit').prop('disabled', true);` – Satpal Mar 06 '14 at 16:45

How to disable a submit button after one click?

2 Answers2