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,
More Posts:
- Fetch More then 10 Links Per Page in Google Search Result - Google
- Android Studio: Cannot perform refactoring operation - Android-Studio
- eclipse maven m2e : Cannot complete the install - Eclipse
- Top 3 Awesome Text Editors developers prefer at workplace - Sublime
- Calculate Area of a Rectangle - C-Program
- What is Bootstrap Jumbotron and how to use it - Bootstrap
- Background task activation is spurious error - Windows 10, Office 2016, Office 365 - HowTos
- How to remove old 404 pages ulrs from Google crawler - Html
- Exception in thread main java.lang.NoClassDefFoundError: package javaClass - Java
- SharePoint Server 2016 error Microsoft Office Online Server 2016 cant be installed on the same machine as a Microsoft SharePoint Server product - SharePoint
- 7 deadly java.lang.OutOfMemoryError in Java Programming - Java
- How to Print from JavaScript HTML using window.print - JavaScript
- Unable to establish connection to adb : Android Studio Error - Android
- How to send WhatsApp message from your Android App using Intent - WhatsApp
- Portable Notepad++ for windows - NotepadPlusPlus