Disable jQuery button after being click


Posted on : Tue, 8th Sep 15 01:05 pm (Updated on : Tue, 8th Sep 15 01:05 pm) UTC
Author : Code2care
100+ votes

If you have a HTML Page with a form, 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 this cause 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 send 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);



Advertisements





    Example :

File : disableButton.html Language : 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>

Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

We are operating with a limited resources due to COVID-19 - Stay Safe!

Follow us : Facebook - Twitter - Google +