CODEWITHSUNDEEP
javascriptjqueryhtml
BTK
BTK

Reputation: 99

jQuery hidden div doesn't show again with on change event

        
<div class="waive_admin_fee">
    <label class="label">Waive admin fee?</label>
    <div>
        <div class="select">
            <select name="waive_admin" required>
                <option value="no">No</option>
                <option value="yes">Yes</option>
            </select>
        </div>
    </div>
</div>
<div class="remaining_payments">
    <label class="label">Remaining Payments</label>
    <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
            <i class="fa fa-money"></i>
        </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
    </div>
</div>

<div id="payments">
    <label class="label">Monthly</label>
    <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
    <label class="label">Customized</label>
    <input type="radio" name="p_option" id="custom" value="custom" required>
</div>

I'm trying to hide few divs based on select dropdown value. If the value is Yes, divs have to be hidden, otherwise they have to be shown. HTML code: 

<div>
    <label class="label" for="">Total Balance Paid </label>
    <div>
      <div class="select">
        <select name="total" id="total">
          <option value="No">No</option>
          <option value="Yes">Yes</option>
        </select>
      </div>
    </div>
 </div>

JS:

$(document).ready(function() {
    $("select[name=total]").on("change", function() {
        if($("select[name=total]").val() == 'Yes') {
          $("#payments,.waive_admin_fee,.remaining_payments").hide();
        } else {
            $("#payments,.waive_admin_fee,.remaining_payments").show();
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

divs are hiding when the value is yes but they are not showing when value is no.

Upvotes: 2

Views: 646

Answers (3)

Twisty
Twisty

Reputation: 30883

Using change event on Select element means the currently selected value has to change. When there are 2 options, this only happens when the other option is selected. Consider the following example.

$(function() {
  $("#total").on("change", function() {
    if ($(this).val() == 'Yes') {
      $(this).parent().next(".pay-info").hide();
    } else {
      $(this).parent().next(".pay-info").show();
    }
  });
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="label" for="">Total Balance Paid </label>
  <div class="select">
    <select name="total" id="total">
      <option></option>
      <option value="No">No</option>
      <option value="Yes">Yes</option>
    </select>
  </div>
  <div style="display: none;" class="pay-info">
    <div class="waive_admin_fee">
      <label class="label">Waive admin fee?</label>
      <div>
        <div class="select">
          <select name="waive_admin" required>
            <option value="no">No</option>
            <option value="yes">Yes</option>
          </select>
        </div>
      </div>
    </div>
    <div class="remaining_payments">
      <label class="label">Remaining Payments</label>
      <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
            <i class="fas fa-dollar-sign"></i>
        </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
      </div>
    </div>
    <div id="payments">
      <label class="label">Monthly</label>
      <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
      <label class="label">Customized</label>
      <input type="radio" name="payment_option" id="custom" value="custom" required>
    </div>
  </div>
</div>

You can see this Select element has 3 options. The User must make a selection.

I would consider changing this to a Checkbox, Radio, or Slider versus a Select element. They are better for binary choices in my opinion.

You may also want to look at your use of Id versus Class. If this page will show multiple customers, then you may want to avoid using id attribute in favor of class. You will also find in jQuery, using - (dash) is going to help more than using _ (underscore) for attribute selectors.

Hope that helps.

Upvotes: 1

Sundar Ban
Sundar Ban

Reputation: 619

You can try this for html. I think at first you must be having multiple selector keeping them without space.

<div>
        <label class="label" for="">Total Balance Paid </label>
        <div>
            <div class="select">
                <select name="total" id="total">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
    </div>

   <div class="helo"> // define class here
    <label class="label">Remaining Payments</label>
    <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
        <i class="fa fa-money"></i>
    </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
    </div>
</div>

<div id="test"> // define id here.
    <label class="label">Monthly</label>
    <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
    <label class="label">Customized</label>
    <input type="radio" name="payment_option" id="custom" value="custom" required>
</div>

In Jquery

$(document).ready(function () {
    $("select[name=total]").on("change", function () {
        if ($(this).val() === 'Yes') {
            $('#test, .helo').show();
        } else {
            $('#test, .helo').hide();
        }
    });
});

Hope this work for you.

Upvotes: 0

geoidesic
geoidesic

Reputation: 5043

Probably your problem is that you have malformed selectors. You should not have commas in selectors. I.e. $("#payments,.waive_admin_fee,.remaining_payments").

Here's a working example:

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div>
    <label class="label" for="">Total Balance Paid </label>
    <div>
      <div class="select">
        <select name="total" id="total">
          <option value="No">No</option>
          <option value="Yes">Yes</option>
        </select>
      </div>
    </div>
 </div>

 <div id="payments">
  <div class="waive_admin_fee">
    <div class="remaining_payments">
  hide me
    </div>
  </div>
 </div>

<script>
  $(document).ready(function() {
    $("select[name=total]").on("change", function() {
        if($("select[name=total]").val() == 'Yes') {
          $("#payments .waive_admin_fee .remaining_payments").hide();
        } else {
            $("#payments .waive_admin_fee .remaining_payments").show();
        }
    });
});
</script>

</body>
</html>

Upvotes: 0

Related Questions