Disable Submit button after click using JavaScript and jQuery

In this article I will provide the easiest way to disable Submit button after click using JavaScript and jQuery.

The script needs to be placed on the web page and it will disable all submit buttons as soon as any submit button is clicked using JavaScript and jQuery.

JavaScript onbeforeunload event handler

The JavaScript onbeforeunload event handler is executed before the page is unloaded i.e. when page is redirected or submitted to the server.

Disable Submit button after click using JavaScript

The following HTML Markup consists of an HTML Button and an HTML Submit Button. When the Submit button is clicked, the JavaScript onbeforeunload event handler is triggered.

Inside the JavaScript onbeforeunload event handler, a loop is executed over all HTML Input elements and the HTML Input elements of type button or submit are disabled.

<head>

</head>

<body>

window.onbeforeunload = function () {

var inputs = document.getElementsByTagName("INPUT");

for (var i = 0; i < inputs.length; i++) {

if (inputs[i].type == "button" || inputs[i].type == "submit") {

inputs[i].disabled = true;

}

};

</script>

</form>

</body>

</html>

Disable Submit button after click using jQuery

The following HTML Markup consists of an HTML Button and an HTML Submit Button. When the Submit button is clicked, the JavaScript onbeforeunload event handler is triggered.

Inside the JavaScript onbeforeunload event handler, all the HTML Input elements of type button or submit are disabled using jQuery.

<head>

</head>

<body>

$(window).on('beforeunload', function () {

$("input[type=submit], input[type=button]").prop("disabled", "disabled");

});

</script>

</form>

</body>

</html>

Note: HTML Input Button was added only for illustration purposes and when HTML Input Button is clicked the page is not submitted and hence you will not experience the Buttons being disabled.

Screenshot