CODEWITHSUNDEEP
jquery
Brad Ahrens
Brad Ahrens

Reputation: 5168

jQuery - onChange() within onChange() not working

TL;DR

Current Output: - Divs' hide/show state only changes when clicking checkbox

Desired Output: - Divs' hide/show state is sensitive to both the checkbox and the dropdown.

Here is a functioning jsfiddle.

Details:


I am trying to only show a part of a page depending on two inputs. With the first input, the user must select a number of rooms. With the second, the user must decide whether he or she is renting out the whole property.

If the user selects more than 1 room and is deciding to rent out the entire property, I would like to show that number of rooms. However, if he or she has multiple rooms and is not renting out the entire property or if he or she has only one room or a studio and is renting out the entire property, I would like to only show 1 room to enter details.

However, my current code will only show the rooms on the click of the button stating that the user is renting the entire property. This situation does not change if the number of rooms is changed.

I have tried to do this with "change" on the dropdown, but it seemed not to work. I have also tried to change the order and it seems that only one will trigger the hide/show properties of the divs.

Any idea how I could make these divs' hide/show state change whenever the user either checks the box or changes their selection in the dropdown?

Code:

Jquery:

$("#Bedroom_2").hide();
$("#Bedroom_3").hide();
$("#Bedroom_4").hide();
$("#Bedroom_5").hide();
$("#Renting_Entire_Property").change(function() {
    if(this.checked) {
          if ($('#Number_of_Bedrooms').val() == 0 ) {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === 'Studio') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '1_Room') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '2_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '3_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '4_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '5_Rooms' || '5+_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").show();
          } else {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          }
    } else {
      $("#Bedroom_2").hide();
      $("#Bedroom_3").hide();
      $("#Bedroom_4").hide();
      $("#Bedroom_5").hide();
    }
});

<h3>HTML</h3>

    <label for="Number_of_Bedrooms">Bedrooms</label>
    <select id="Number_of_Bedrooms" name="Number_of_Bedrooms">
      <option></option>
      <option value="Studio">Studio</option>
      <option value="1_Room">1</option>
      <option value="2_Rooms">2</option>
      <option value="3_Rooms">3</option>
      <option value="4_Rooms">4</option>
      <option value="5_Rooms">5</option>
      <option value="5+_Rooms">5+</option>
    </select>
    <br>
    <label class="custom-control custom-checkbox">
      <input type="checkbox" id="Renting_Entire_Property">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check if in this listing you are renting the entire property</span>
    </label>
    <div id="Bedroom_1">Test 1
    </div>
    <div id="Bedroom_2">Test 2
    </div>
    <div id="Bedroom_3">Test 3
    </div>
    <div id="Bedroom_4">Test 4
    </div>
    <div id="Bedroom_5">Test 5
    </div>

Here is a functioning jsfiddle.

Thanks!

Thanks @Andreas, @bassxzero, and @Jairo Cordero for your help! I found that each solution worked and you guys were super fast! Thanks again! :)

Upvotes: 0

Views: 145

Answers (2)

Jairo Cordero
Jairo Cordero

Reputation: 640

Add this to your code

  $("#Number_of_Bedrooms").on("change",function(){
        $("#Renting_Entire_Property").trigger("change");
    });

https://jsfiddle.net/7moon6f3/1/

Upvotes: 1

bassxzero
bassxzero

Reputation: 5041

Add your event handler to the select and the checkbox, then target the select in your code.

https://jsfiddle.net/8gvLvwg2/

$("#Bedroom_2").hide();
$("#Bedroom_3").hide();
$("#Bedroom_4").hide();
$("#Bedroom_5").hide();
$(document).on('change','#Renting_Entire_Property,#Number_of_Bedrooms',function() {
      var $checkbox = $("#Renting_Entire_Property");
    if($checkbox.prop('checked')) {
          if ($('#Number_of_Bedrooms').val() == 0 ) {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === 'Studio') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '1_Room') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '2_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '3_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '4_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '5_Rooms' || '5+_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").show();
          } else {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          }
    } else {
      $("#Bedroom_2").hide();
      $("#Bedroom_3").hide();
      $("#Bedroom_4").hide();
      $("#Bedroom_5").hide();
    }
});

Upvotes: 2

Related Questions