Sagar Kodte Sagar Kodte - 2 months ago 9
HTML Question

Hide the div click on NO radio button

I solved my issue in snippet but when i using it on my website is not applying means when i click the

No
radio
button the
pro div
is not closing but here in snippet is working even no errors in console.
Please anyone have other solution to similar like this one. Thanks.

Updated with full code:
now not working here also there are two
pro div
should be close on
No
and open on
YES




function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var pro = document.getElementsByClassName("pro");
for (var i = pro.length - 1; i >= 0; i--) {
pro[i].style.display = chkYes.checked ? "block" : "none";
}

}

$('input[type="radio"]').change(function () {
$(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">

<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>

<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>

<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>


</div>

<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>

<div class="form-group 2 box" style="display:none">

<input type="date" class="required" name='durability' id="datepicker" value="" >


</div>

<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>

<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>

</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>

</div>




Answer

This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.

Also be careful with this

  
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
    $('.pro').show();
}else{
    $('.pro').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
          <form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
    <div class="row">
      <div class="col-lg-6">
      
                <h4>English</h4>
              <div class="form-group">
              <label>Category:</label>
                  <select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
                    <option value=""></option>
                      <?php foreach ($getSubCat as $key => $value) {?>
                      <option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
                      <? } ?>
                  </select>
              </div>

              <div class="form-group">
                  <input class="form-control required" name="name" id="name" placeholder="Business Name">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
              </div>
              <div class="form-group">
                  <input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
              </div>

              <div class="form-group">
                  <textarea class="form-control required" rows="3"  name="address"  id="address" placeholder="Address"></textarea>
              </div>       
          <div>
  <div class="form-group ">
      <select id="location"   class="form-control  required" name="location" >
        <option value="">Select Location</option>
        <?php
        foreach ($getLoc as $key => $value) {
          $location = $value['location_name']; ?>
            <option  value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
        <?php } ?>
      </select>
      </div>

 
      </div>

<div class="form-group">
      <div class="typediv">
          <label><input type="radio" name="type" value="1"> Free</label>
          <label><input type="radio"  name="type" value="2"> Paid</label>
          <label><input type="radio"  name="type" value="3"> Emergancy</label>
      </div>                                
  </div>
      <div class="2 box"></div>
      <div class="3 box"></div>

  <div class="form-group 2 box" style="display:none">
              
       <input type="date" class="required" name='durability' id="datepicker" value="" >
     
 
            </div>
            
            <div class="form-group isprocontactdiv">
            <label>Is Pro Contact </label>
                Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
                No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
            </div>

        <div class="pro" style="display: none;" >
            <div class="form-group">
                <input class="form-control required" name="email" placeholder="Email"  >
            </div>
            <div class="form-group" >
                <input type="file" name="userfile">
            </div>
            <div class="form-group">
                <textarea class="form-control required"  id="description" name="description" rows="3" placeholder="Description" ></textarea>
            </div>
            <div class="form-group">
                <textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
            </div>
        </div>
           
    </div>
    <div class="col-lg-6">
            <h4>Marathi</h4>
            <div class="form-group">
                <input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
            </div>
            <div class="form-group">
                <input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
            </div>
            <div class="form-group">
                <textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
            </div>
            <div class="pro" style="display:none">
                <div class="form-group">
                    <textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
                </div>
                <div class="form-group">
                    <textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
                </div>
            </div>    
    </div>
    </div>
    <!-- /.row -->
     <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-warring">Reset</button>
            </form>

</div>