[Solved] Javascript Hide-Unhide HTML Text Box

by


This is an issue with your selector you are selecting the drop-down with a name using a # sign:

and there’s also a problem with your selector #ref-col in your JS it should be like this #ref_col

change your name to id="pf_status" in your HTML like this and this will work:

$(document).on('change', '#pf_status', function() {

  var val = $(this).val();
  
  $('#ref_col').toggle(val!=2)

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <div class="form-group">
    <label>
      Pass Fail Status
      <span class="text-danger">*</span>
    </label>
    <select class="form-control" id="pf_status">
      <option value="1">Pass</option>
      <option value="2">Fail</option>
    </select>
  </div>
</div>

<div class="col-md-3" id="ref_col">
  <div class="form-group">
    <label>Pass Date</label>
    <font style="font-size: 14px; color: #AA0000"></font>
    <input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
  </div>
</div>

6

solved Javascript Hide-Unhide HTML Text Box