Normally, people will press a submit button more than a time to make sure the button is surely clicked. While do so, it will results and cause submission issue and sometimes shows error. To overcome this problem, the only solution is to disables the submit button after user clicked it.

Using jQuery has many features, where it allows you to enable and disable the buttons. By the way, today we will show you how to quickly enable or disable the submit button using jQuery.

To enable or disable a button with jQuery, we have to use those two methods, attr() and removeAttr().

$(‘.enableOnInput’).prop(‘disabled’, true); //TO DISABLED

$(‘.enableOnInput’).prop(‘disabled’, false); //TO ENABLE

To Disable Button

To do so, you have to add a disabled attribute to the submit button, as follows:

$(“#buttonSubmit”).attr(“disabled”, true);
For example
<script>
    $(document).ready(function () {

        $("#formABC").submit(function (e) {

            //stop submitting the form to see the disabled button effect
            e.preventDefault();

            //disable the submit button
            $("#btnSubmit").attr("disabled", true);

            //disable a normal button
            $("#btnTest").attr("disabled", true);

            return true;

        });
    });
</script>

To Enable Button

For this, either you can disabled attribute to false or remove the disabled attribute. Therefore, there are two ways to enable a disabled button. Let’s see how to enable it in 2 methods.

$(‘#buttonSubmit’).attr(“disabled”, false);          

or

$(‘#buttonSubmit’).removeAttr(“disabled”);

Disabled by Default while Loading

Another example for default disabled. On page load, you can set the button be disabled by default. Once the user fills the form, it will enable automatically.

// To Disable Submit Button By Default

$(“input[type=submit]”).attr(‘disabled’,’disabled’);

// When User Fills Out Form Completely

$(“form”).keyup(function(){

$(“input[type=submit]”).removeAttr(‘disabled’);

});

Also, disable submit button on its first click.

$(“input[type=submit]”).click(function(){

$(“input[type=submit]”).attr(‘disabled’,’disabled’);

});

jQuery File for Disable/Enable

<script>$(document).ready(function() {
$("#submit").attr('disabled', 'disabled');
$("form").keyup(function() {
// To Disable Submit Button
$("#submit").attr('disabled', 'disabled');
// Validating Fields
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var filter = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
if (!(name == "" || email == "" || message == "")) {
if (filter.test(email)) {
// To Enable Submit Button
$("#submit").removeAttr('disabled');
$("#submit").css({
"cursor": "pointer",
"box-shadow": "1px 0px 6px #333"
});
}
}
});
// On Click Of Submit Button
$("#submit").click(function() {
$("#submit").css({
"cursor": "default",
"box-shadow": "none"
});
alert("Form Submitted Successfully..!!");
});
});

Leave a Reply

Your email address will not be published. Required fields are marked *