dev odedra dev odedra - 4 months ago 12
HTML Question

I want to hide all the field when page load in jquery

I have an scenario where i show and hide fields based on the selected value from drop down.

Its working perfect but when it's loading first time, at that time it shows all the fields value.

So i want to hide all the value when page load.



jQuery(document).ready(function($) {
$('select[name=mem_type]').change(function() {
// hide all optional elements
$('.common-subject').hide();
$('.maths-subject').hide();
$('.biology-subject').hide();
$('.pro-member-type').hide();

$("select[name=mem_type] option:selected").each(function() {
var value = $(this).val();
if (value == " ") {
$('.common-subject').hide();

} else if (value == "Biology") {
$('.biology-subject').show();

} else if (value == "Maths") {
$('.maths-subject').show();

}

});
});
});

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<div id="reg_mem_type" class="form-row form-row-wide">
<label for="reg_mem_type">Subject Type</label>

<select id="reg_mem_type" name="mem_type">
<option value=" "></option>
<option value="Biology">Biology</option>

<option value="Maths">Maths</option>

</select>

</div>



<div class="common-subject biology-subject form-row form-row-wide">
<h2>Biology</h2>
</div>
<div class="common-subject biology-subject form-row form-row-wide">
<label for="reg_first_name">Biology</label>
<input type="text" class="input-text" name="maths" id="reg_first_name" size="10" />
</div>


<div class="common-subject biology-subject form-row form-row-wide">
<label for="reg_last_name">Biology1</label>
<input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" />
</div>


<div class="maths-subject common-subject form-row form-row-wide">

<h2>Maths</h2>
</div>
<div class="common-subject maths-subject form-row form-row-wide">
<label for="reg_website">Maths1</label>
<input type="text" class="input-text" name="website" id="reg_website" />
</div>
<div class="maths-subject common-subject form-row form-row-wide">
<label for="reg_fax">Maths2</label>
<input type="text" class="input-text" name="fax_num" id="reg_fax" />
</div>
</head>




Answer

jQuery(document).ready(function($) {
  $('select[name=mem_type]').change(function() {
    // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();

    $("select[name=mem_type] option:selected").each(function() {
      var value = $(this).val();
      if (value == " ") {
        $('.common-subject').hide();

      } else if (value == "Biology") {
        $('.biology-subject').show();

      } else if (value == "Maths") {
        $('.maths-subject').show();

      }

    });
  }).change();//manually call change event so that on load it run the change event
});
<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
  <div id="reg_mem_type" class="form-row form-row-wide">
    <label for="reg_mem_type">Subject Type</label>

    <select id="reg_mem_type" name="mem_type">
      <option value=" "></option>
      <option value="Biology">Biology</option>

      <option value="Maths">Maths</option>

    </select>

  </div>



  <div class="common-subject biology-subject form-row form-row-wide">
    <h2>Biology</h2>
  </div>
  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_first_name">Biology</label>
    <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" />
  </div>


  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_last_name">Biology1</label>
    <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" />
  </div>


  <div class="maths-subject common-subject form-row form-row-wide">

    <h2>Maths</h2>
  </div>
  <div class="common-subject maths-subject form-row form-row-wide">
    <label for="reg_website">Maths1</label>
    <input type="text" class="input-text" name="website" id="reg_website" />
  </div>
  <div class="maths-subject common-subject form-row form-row-wide">
    <label for="reg_fax">Maths2</label>
    <input type="text" class="input-text" name="fax_num" id="reg_fax" />
  </div>
</head>

Call .change()