jQuery - How do I enable/disable a submit button?
Using jQuery to enable or disable a button has several advantages depending on the user's interaction. You'll easily be able to use this code with other jQuery implementations. Let's get started.For the impatient, you can use the prop() function compatible with versions below jQuery 1.6:
$('.button').prop('disabled', true); to disable
$('.button').prop('disabled', false); To enableOthers who want to know more and see other functions to disable and activate a button, I invite you to read on.In web development, the most popular problem is to click the submit button twice. Sometimes users click several times to make sure the button was clicked, but this causes double validation.
If you created an HTML form, especially with jQuery and Ajax, you will need to disable the submit button while the page is loading when you click the button. Because you don't want the user to click the same button a second time because it can lead to errors. So, to prevent this from happening we need to disable the submit button.
The solution is to disable the submit button after the user clicks on it, and display a loading or message to show the user that the processing is progressing.
Disable the submit button
To disable the submit button with jQuery, You need to disable the button attribute Submit.
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
Enable submit button
To enable the disable submit button, change the value of the "disabled" attribute to false, or remove the "disabled" attribute.
$('input:submit').attr("disabled", false);
or
('input:submit').removeAttr("disabled");
The attr() and removeAttr() functions play the same role as the prop() function, except that they have been integrated into jQuery since version 1.6.
Example
We're going to create a simple HTML form that contains inputs and a button. This form is a contact form and the user must specify their name, surname, email address and message. The idea is not to allow the user to click the "send" button twice.
< head>
< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
< style>
input,textarea{
margin-bottom:10px;
}
< body>
< form action="" id="form" method="POST">
Name:
< input id="name" name="name" type="text" />
First name:
< input id="firstname" name="firstname" type="text" />
Email:
< input id="email" name="email" type="text" />
Message:
< textarea cols="50" id="message" name="message" rows="5">
< input id="btn_envoyer" type="submit" value="Send" />
< script>
$(function()
{
$('#btn_envoyer').click(function()
{
$(this).attr("disabled", "disabled");
});
});