Buttons

How to Disable a Button after Clicking

Sometimes you may require to disable a button after a user clicks it to avoid submitting data multiple times. It’s time to deploy JavaScript to assist you achieve this. You do this by using the disabled property in in-line code with JavaScript.

<html>
<head>
    <title>How to Disable Button Using Disabled Property</title>
</head>
<body>
    <h3>Submit data By clicking the Button!</h3>
    <p>
    	<input type='submit' value='Submit' id=btnClick' 
            onclick='save(); this.disabled = true;' />
    </p>
    <p id="rtn"></p>
</body>
<script>
    function save() {
        var rtn = document.getElementById('msg');
        rtn.innerHTML = 'Data submitted Successfully';
    }
</script>
</html>

OPtion 2: Remove Click Event

You can also disable a button after the first click by removing the onclick event handler. You do this by simply setting its value to null.

Advertisement
Buttons
<html>
<head>
    <title>Remove the Click Event</title>
</head>
<body>
    
   
    	<input type='submit' value='Submit' id='btnClick' 
        	onclick='save(); 
                this.onclick = null; 
                    this.setAttribute("style", "color: #ccc");' />
    </p>
    <p id="rtn"></p>
</body>
<script>
    var n = 0;
    function save() {
        var rtn = document.getElementById('rtn');
        rtn.innerHTML = ' Data submitted';

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

Option 3 Add the disable part in the submit event

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

This doesn’t work if the <button> has a value="" attribute – browsers don’t submit disabled controls (input, button, select, textarea) if they’re disabled, and that happens right after the onsubmit event, not before it. 

Related Posts

Facebook

Get the Facebook Likebox Slider Pro for WordPress