If you have an HTML Page with a form, the user fills up the form and clicks the submit button, sometimes the response from the server end is slow or the internet bandwidth of the user is slow, so the user may click the button, again and again, causing the form to be submitted more then once. This causes unwanted duplicate requests to the server thus cause a lot of trouble and unwanted bandwidth utilization. Thus one must handle this issue at the Client end so that no invalid or redundant requests are sent to the server.
There are various ways you can prevent this issue, one of the easiest and the best way is to disable the button once being clicked using jQuery attr function.
//to disable a button
$('#buttonId').attr("disabled", true);
//to enable a button
$('#buttonId').attr("disabled", false);
File : disableButton.html
<html>
<head>
<title>Disable/Enable button using jQuery</title>
</head>
<body>
<form id="form" action="welcome.php" method="get">First Name :
<input type="text" id="fname" />
<br/>
<br/>Last Name :
<input type="text" id="lname" />
<br/>
<br/>Email :
<input type="text" id="email" />
<br/>
<br/>Username :
<input type="text" id="uname" />
<br/>
<br/>Password :
<input type="password" id="uname" />
<br/>
<br/>
<input type="button" id="button" value="Submit" onclick="validateForm()" />
</form>
<script>
function validateForm() {
$('#button').attr("disabled", true);
$("#form").submit();
}
</script>
</body>
</html>
More Posts related to jQuery,
- jQuery: Check if an element exists or not
- [jQuery] Uncaught ReferenceError: $ is not defined at index.html:5
- Make div element draggable using jQuery
- jQuery : Move to top of the page
- Dynamically Obtaining Browser Screen Width and Height with jQuery [Updated 2023]
- How to check if an element is hidden using jQuery code?
- Redirect page using jQuery
- Disable jQuery button after being click
More Posts:
- SharePoint installation error - Setup is unable to proceed due to the following error This product requires Microsoft .Net Framework 4.5 - SharePoint
- [Fix] reCAPTCHA not working in Web Browser - Google
- Convert Java Object to JSON using Jackson Library - Java
- Fix Microsoft Teams Error code - 107 - Teams
- [Fix] Microsoft Teams No Network Connection Please check your network settings and try again. [2603] - Teams
- How to revert a single file from Git Repo - Git
- How to stop MongoDB Server running on Ubuntu - Ubuntu
- Can we move apps like WhatsApp, Facebook to external MicroSD card - WhatsApp