In this article I will explain with an example, how to avoid / prevent / disable double click on Submit button using 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 jQuery to avoid / prevent / disable double click on Submit button using jQuery.
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
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads