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