Question 36749 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery to block the button

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?

Tags:

2

Answers


  1. 0

    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" class="blue submit-area btn">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>
    Login or Signup to reply.
  2. 0

    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’)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search