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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="//www.aspsnippets.com/">
    <input type="button" id="btn" value="Button" />
    <input type="submit" id="btnSubmit" value="Submit" />
    <script type="text/javascript">
        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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="//www.aspsnippets.com/">
    <input type="button" id="btn" value="Button" />
    <input type="submit" id="btnSubmit" value="Submit" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(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
Disable Submit button after click using JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads

Button_Double_Click.zip