Hello Everyone!!
As we know that when we are clicking the submit button then it send the data to the server, but what happen if we are not disabling the submit button after the one click then here is the some problem :-
- If the user double click on the submit button then the data will send twice to the server.
- If there is no message to show that the data is successfully send to the server then the user will click more times to the submit button.
To solve the above problem we can disable the submit button after the one click event by using javaScript and jQuery.
It is done by using the javaScript :-
- onbeforeunload event handler:- The javascript onbeforeunload event handler is executed before the page load. That means when the page is submitted the data to the server.
In this example we have a submit button and a HTML button. when the submit button is clicked, with the help of onbeforeunload event handler we can disable the submit button with the help of the java script code.
Code:-
<body>
<form action="#">
<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>
When the submit button is clicked, the loop will execute and disable the submit button.
Using jQuery:-
<body>
<form action="#">
<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>
0 Comment(s)