Jquery to block the button-CodePudding

I need to block the button and change the text(diable:Fill All The Fields) when the form is not filled completely. The form consist of #email', '#firstname', '#lastname', '#s2id_country and etc. I have wriiten the code but it didn't work.

    $(document).ready(function() {
    $ ('#email', '#firstname', '#lastname', '#s2id_country').keyup(function() {
        if ($(this).val() !== "") {
            $('.blue .submit-area .btn').removeAttr('disabled');
        } else {
            $('.blue .submit-area .btn').attr('disabled', 'true');
            $(".blue .submit-area .btn").text("Fill All The Fields")

        }
    });
});

But it didn't work. Can anybody help me with it?

CodePudding user response：

Please change code syntex from $ ('#email', '#firstname', '#lastname', '#s2id_country') to $("#email, #firstname, #lastname, #s2id_country").keyup(function() and change code from $('.blue .submit-area .btn') to $('.blue, .submit-area, .btn').

I have made come more changes from your code.

Please check my code here,

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<html>
<input type="text" id="email" value="" />
<input type="text" id="firstname" value="" />
<input type="text" id="lastname" value="" />
<input type="text" id="s2id_country" value="" />

<button type="button" >Save All</button>
</html>
<script>
$(document).ready(function() {
        
$("#email, #firstname, #lastname, #s2id_country").keyup(function() {
    if ($("#email").val() !== "" && $("#firstname").val() !== "" && $("#lastname").val() !== "" && $("#s2id_country").val() !== "") {
        $('.blue, .submit-area, .btn').removeAttr('disabled');
         $(".blue, .submit-area, .btn").text("Save All");
    } else {
        $('.blue, .submit-area, .btn').attr('disabled', 'true');
        $(".blue, .submit-area, .btn").text("Fill All The Fields");

    }
});
});
</script>

CodePudding user response：

You should used the prop('disabled', true) method to disable the element in question. If you are using .attr then it should be .attr('disabled', 'disabled')