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,
- Make div element draggable using jQuery
- [jQuery] Uncaught ReferenceError: $ is not defined at index.html:5
- Redirect page using jQuery
- jQuery : Move to top of the page
- Disable jQuery button after being click
- Get Browser Screen Width and Height dynamically using jquery
- How to check if an element is hidden using jQuery?
More Posts:
- Android Studio SDK Build-tools 23 rc2 not getting installed - Android-Studio
- BeanDefinitionStoreException IOException parsing XML document from class path resource [spring.xml] - Java
- Base64 Encoding Decoding In Notepad++ - NotepadPlusPlus
- Your JBoss Application Server 7 is running However you have not yet added any users to be able to access the admin console - Java
- error CAML Query containing special characters - SharePoint
- [javaScript] Convert text case to lowercase - JavaScript
- Disabling Spell Check in Android Studio - Android-Studio
- Disable Chrome Notification bell from Mac OS X menu bar - Mac-OS-X
- How to Undo-Revert Sent Email in Google Gmail - Google
- List of jars required for Struts2 project - Java
- Error : Facebook SDK AndroidRuntime﹕FATAL EXCEPTION: main - Android
- Fail to connect to camera service Android java RuntimeException - Android
- Eclipse Error : The Eclipse executable launcher was unable to locate its companion shared library. - Eclipse
- JavaScript : Get current page address - JavaScript
- Make Android View Scrollable both Horizontally and Vertically - Android