In this article I will explain with an example, how to avoid / prevent / disable double click on Submit button using JavaScript and jQuery.
When user double clicks any Button, it results in duplicate operations and hence to avoid such behavior as soon as the Submit Button is clicked, it is disabled using JavaScript or jQuery to avoid / prevent / disable double click on Submit button using JavaScript and jQuery.
Avoid / Prevent / Disable double click on Submit button using JavaScript
The following HTML Markup consists of an HTML Button and an HTML Submit Button.
When a form is submitted, the window onbeforeunload event handler is executed.
Note: The window onbeforeunload event occurs before the window onunload event which occurs when page is submitted or redirected.
Inside the window onbeforeunload event handler, all the HTML INPUT elements are fetched and if the Type attribute has value button or submit then it is disabled using JavaScript.
<input type="button" id="Button1" value="Button" onclick="document.forms[0].submit()" />
<input type="submit" id="Submit1" value="Submit Button" />
<script type="text/javascript">
window.onbeforeunload = function () {
var inputs = document.getElementsByTagName("INPUT");
for (var i in inputs) {
if (inputs[i].type == "button" || inputs[i].type == "submit") {
inputs[i].disabled = true;
}
}
};
</script>
Avoid / Prevent / Disable double click on Submit button using jQuery
The following HTML Markup consists of an HTML Button and an HTML Submit Button.
When a form is submitted, the window onbeforeunload event handler is executed.
Note: The window onbeforeunload event occurs before the window onunload event which occurs when page is submitted or redirected.
Inside the window onbeforeunload event handler, the HTML Input Button and HTML Submit button are selected using jQuery and the disabled attribute is set.
<input type="button" id="Button1" value="Button" onclick="document.forms[0].submit()" />
<input type="submit" id="Submit1" value="Submit Button" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
window.onbeforeunload = function () {
$("input[type=button], input[type=submit]").attr("disabled", "disabled");
};
</script>
Screenshot
![Avoid / Prevent / Disable double click on Submit button 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
