How to disable Submit button after click using JavaScript

We often come across this situation when we want to disable the submit button after clicking it or immediately after submitting the data. You can do this using the disabled property in a one-line code using plain JavaScript.

I have explained about the disabled property in detail in my previous posts. In this example too, I am using the same property to disable the submit button (or any button control), after clicking the button.

This method would help restrict your users from clicking and submitting the data repeatedly.

Using a One-Line Code

<html>
<head>
    <title>Disable button using disabled property</title>
</head>
<body>
    <p>Click the button to submit data!</p>
    <p>
    	<input type='submit' value='Submit' id='btClickMe' 
            onclick='save(); this.disabled = true;' />
    </p>
    <p id="msg"></p>
</body>
<script>
    function save() {
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Data submitted and the button disabled &#9786;';
    }
</script>
</html>

Try it

Like I said, you can submit and disable the button using a one-line code. Look as the onclick event attribute that I have attached with the input element.

Remove button’s Click Event

There’s another way you can disable the submit button after the first click. You can simply remove the onclick event handler by setting its value as null.

<html>
<head>
    <title>Remove button’s click event</title>
</head>
<body>
    <p>Click the button to submit data!</p>
    <p>
    	<input type='submit' value='Submit' id='btClickMe' 
        	onclick='save(); 
                this.onclick = null; 
                    this.setAttribute("style", "color: #ccc");' />
    </p>
    <p id="msg"></p>
</body>
<script>
    var n = 0;
    function save() {
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Data submitted and the buttons event removed &#9786;';

        console.log(n + 1);
    }
</script>
</html>

Try it

← PreviousNext →