Enable button if the mentioned input boxed are filled using jquery?

Question

HTML:

<input type="text" id="message"/>
<input type="text" id="message1"/>
<input type="button" class="sendButton" value="submit"/>

This code displays two input boxes and one submit button.

jQuery:

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);

    $("#message,#message1").bind(" change",function(){
        if($(this).val().length !=0){
            $('.sendButton').attr('disabled', false);
        }
        else
        {
            $('.sendButton').attr('disabled', true);        
        }
    });
});

This is my jQuery to enable and disable buttons. But it enables the button, if one of the field is filled.I want to enable it only when both the input fields are filled.

Possible duplicate of [Disabling submit button until all fields have values](https://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values) — Durga, Nov 13 '17 at 11:04

score 2 · Answer 1 · answered Nov 13 '17 at 11:00

So add checking for both elements and just check the val(). You don't need to access the length.

$(document).ready(function() {
   $('.sendButton').attr('disabled',true);

   const message = $('#message');
   const message1 = $('#message1');

   $("#message, #message1").on("change",function() {

      if(message.val() && message1.val()){
        $('.sendButton').attr('disabled', false);
      } else {
        $('.sendButton').attr('disabled', true);        
      }

   });
});

score 0 · Answer 2 · answered Nov 13 '17 at 11:04

Here is a simple small solution. Instead of checking for hardcode IDs and change event, you can actually use input with input event. This means, even if your input elements increase, this snippet would work:

$('input').on('input', function() {
  $(".sendButton").prop('disabled', true);
  if (checkIfEmpty()) {
    $(".sendButton").prop('disabled', false);
  }
});

function checkIfEmpty() {
  var flag = true;
  $('input').each(function() {
    var enteredValue = $(this).val();

    if ($.trim(enteredValue).length == 0)
      flag = false;
  });
  return flag;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="message" />
<input type="text" id="message1" />
<input type="button" class="sendButton" value="submit" disabled />

score 0 · Answer 3 · answered Nov 13 '17 at 11:07

You need to get value of each textbox separately like following. And the you can use prop method like following.

$("#message, #message1").keyup(function() {
  var msg = !$("#message").val(),
      msg1 = !$("#message1").val();
  
    $('.sendButton').prop('disabled', (msg || msg1));
}).keyup(); //to call on page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="message" />
<input type="text" id="message1" />
<input type="button" class="sendButton" value="submit" />

score 0 · Accepted Answer · answered Nov 13 '17 at 12:50

$(document).ready(function(){
$('#message'&&'#message1').keyup(function(){
$('.sendButton').attr('disabled', false)
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="message"/>
<input type="text" id="message1"/>
<input type="button" class="sendButton" value="submit" disabled/>

Enable button if the mentioned input boxed are filled using jquery?

4 Answers4