Introduction:
In this article I will
explain how to disable submit button after click or submit. When the Submit
button is clicked, the JavaScript “onbeforeunload” event handler is triggered.
Following Javascript method is used to disable submit button:
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.
<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>
Full Source code for Sample Application:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form action="http://www. maziksolutions.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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form action="http://www.maziksolutions.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>
0 comments:
Post a Comment