How to show/hide div when both the textbox and select box value changed?

user_10430519 0
Viewed 95

I have a select for gender and a textbox for age. When the textbox and gender values are selected then I wan to display the new div.

I am unable to show the div when both the gender is selected and age is entered. I tried based on individual value change, it is working, but don't know how to do with both the textbox and gender value.

How can I combine both the keyup and change code to achieve the desired output?

$(document).ready(function() {
  $('#age').keyup(function() {
    var age = $("#age").val();
    if (age)
      $('#showOption').css('display', 'block');
    else 
      $('#showOption').css('display', 'none');
  });

  $('#gender').on('change', function() {
    var gender = $("#gender").val();
    if (gender)
      $('#showOption').css('display', 'block');
    else 
      $('#showOption').css('display', 'none');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="form-control-label">Gender</label>
  <select name="gender" id="gender">
    <option selected disabled>--Select Option--</option>
    <option value='male'>male</option>
    <option value='female'>female</option>
  </select>
</div>

<div class="form-group">
  <label class="form-control-label">Age</label>
  <input type="text" class="form-control" id="age" name="age" required>
</div>


<div style="display:none" id="showOption">
  This div is to show or hide
</div>

jquery javascript
2 Answers

To achieve this you can create a function which is called when both events occur. This function will check the values of both fields and toggle the div if both have been set. Try this:

jQuery($ => {
  let showDivIfValuesEntered = () => {  
    let age = parseInt($age.val() || 0, 10);
    let ageInRange = age >= 20 && age <= 50;
    $('#showOption').toggle(ageInRange && $gender.val() !== '');
  }

  let $age = $('#age').on('keyup', showDivIfValuesEntered);
  let $gender = $('#gender').on('change', showDivIfValuesEntered);
});
#showOption { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="form-control-label">Gender</label>
  <select name="gender" id="gender">
    <option selected disabled>--Select Option--</option>
    <option value="male">male</option>
    <option value="female">female</option>
  </select>
</div>

<div class="form-group">
  <label class="form-control-label">Age</label>
  <input type="text" class="form-control" id="age" name="age" required>
</div>


<div id="showOption">
  This div is to show or hide
</div>

user_5194130

I would do something like this

    let age, gender;

    $('#age').keyup(function() {
        age = this.value;

        if(age && gender) $('#showOption').css('display', 'block');
        else $('#showOption').css('display', 'none');
            
    });

    $('#gender').on('change', function(){
       gender = this.value;
       
       if(gender && age) $('#showOption').css('display', 'block');
       else $('#showOption').css('display', 'none');
    });
user_67487720
Related