CODEWITHSUNDEEP
javascriptjqueryhtml
Paweł Smacki
Paweł Smacki

Reputation: 27

Multiple inputs in js...?

It works - I can't click the button when input #key1 is empty. But I need to use two inputs - #key1 and #key2. To do - When both are empty or 1/2, nobody can't click the button. Thanks!!

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
  $(function() {
    $('#key1').keyup(function() {
      if ($(this).val() == '') {
        //Check to see if there is any text entered
        // If there is no text within the input ten disable the button
        $('.enableOnInput').prop('disabled', true);
      } else {
        //If there is text in the input, then enable the button
        $('.enableOnInput').prop('disabled', false);
      }
    });
  });
</script>

Upvotes: 2

Views: 56

Answers (2)

farvilain
farvilain

Reputation: 2562

Not sure that I've understood but tell me

<script type='text/javascript'>
  $(function() {
    var button1 = $('#key1');
    var button2 = $('#key2');

    function keyUp(){
      console.log('1', button1.val());
      console.log('2', button2.val());

      var hasValue = ( button1.val() !== '' || button1.val() !== '');
      $('.enableOnInput').prop('disabled', hasValue);
    }

    button1.keyup(keyUp);
    button2.keyup(keyUp);
  });
</script>

Upvotes: 0

Kashyap Merai
Kashyap Merai

Reputation: 862

Try this

$(function() {
  $("#key1, #key2").keyup(function() {
    if ($("#key1").val() == "" || $("#key2").val() == "") {
      $(".enableOnInput").prop("disabled", true);
    } else {
      $(".enableOnInput").prop("disabled", false);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="key1">
<input type="text" id="key2">
<button class="enableOnInput" disabled>Click me</button>

Upvotes: 1

Related Questions