Introduction
This explains 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.
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.
When a form is submitted, the window onbeforeunload event handler is executed.
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>
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.
When a form is submitted, the window onbeforeunload event handler is executed.
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>
No comments:
Post a Comment