Javascript: Hide .div if two inputs have a value

Question

I have two inputs with classes (q1, q2) and a div with class (output). I would like to be able to hide the div when one or all of the inputs have "any value". I'm new to javascript.

$(document).ready(function() {
  $('.q1, .q2').keyup(function() {
    if ($(this).val().length == 0) {
      $('.output').show();
    } else {
      $('.output').hide();
    }
  }).keyup();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="output">Test</div>
<input type="text" value="" class="q1">
<input type="text" value="" class="q2">

M. Haseeb Akhtar · Accepted Answer · 2021-09-17 09:56:57Z

1

You need to check both input values to achieve your goal like this:

$(document).ready(function() {
  $('.q1, .q2').keyup(function() {
    var q1 = $('.q1').val();
    var q2 = $('.q2').val();

    if (q1.length || q2.length) {
        $('.output').hide();
    } else {
        $('.output').show();
    }
  }).keyup();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="output">Test</div>
<input type="text" value="" class="q1">
<input type="text" value="" class="q2">

answered Sep 17, 2021 at 9:56

M. Haseeb Akhtar

86711 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Butler · Accepted Answer · 2021-09-17 10:03:43Z

0

Haseeb has given a great answer.

Just wanted to mention as you're new to JQuery / Javascript it's often worth checking the existence of classes before using them, as it prevents changes to the HTML further down the line causing unexpected issues.

$(document).ready(function() {
     // Check if the classes exist here
     if ($(".q1")[0] && $(".q2")[0] ) {
          $('.q1, .q2').keyup(function() {
            var q1 = $('.q1').val();
            var q2 = $('.q2').val();
        
            if (q1.length || q2.length) {
                $('.output').hide();
            } else {
                $('.output').show();
            }
          }).keyup();
        }
    });

answered Sep 17, 2021 at 10:03

Michael Butler

1996 bronze badges

3 Comments

M. Haseeb Akhtar Over a year ago

You don't really need to check their existence in this case, if q1 and q2 class are not present in the DOM, this function will simply not fire, without causing any issue.

fdomn-m Over a year ago

if($(".q1")[0]) isn't very clear. Better stick with tried and tested if ($(".q1,.q2").length). But, as above, not needed as $(".q1,.q2").keyup will only be applied to q1/q2 that already exist at the time, so no need to check - when adding events (but other times, this may be good practice)

Michael Butler Over a year ago

Thank you @freedomn-m, that's helpful to know about .keyup()

Collectives™ on Stack Overflow

Javascript: Hide .div if two inputs have a value

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related