how to hide input fields on radio button selection

Question

I have four radio buttons (fixed,percentage,monthly,yearly), two buttons have common fields and other two have common fields. I created two divs one for fixed and percentage and other for monthly and yearly with add more button. The problem is when I enter data for monthly div (with multiple rows), I get the data but the 0th position is blank which gets stored in the database as 0. The solution for this is to have only one div and based on the radio button I just need to hide and show fields, that's what I want.

HTML Code for labels

<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
             <div class="col-lg-10" required>
               <label class="custom-control custom-control-primary custom-radio">
                 <input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
                 <span class="custom-control-indicator"></span>
                 <span class="custom-control-label">Fixed price</span>
               </label>
               <label class="custom-control custom-control-primary custom-radio">
                 <input class="custom-control-input" type="radio" name="comission_type" value="1">
                 <span class="custom-control-indicator"></span>
                 <span class="custom-control-label">Percentage wise</span>
               </label>
               <label class="custom-control custom-control-primary custom-radio">
                 <input class="custom-control-input" type="radio" name="comission_type" value="2">
                 <span class="custom-control-indicator"></span>
                 <span class="custom-control-label">Monthly</span>
               </label>
               <label class="custom-control custom-control-primary custom-radio">
                 <input class="custom-control-input" type="radio" name="comission_type" value="3">
                 <span class="custom-control-indicator"></span>
                 <span class="custom-control-label">Yearly</span>
               </label>
         </div>

Html code for fixed/percentage div

<div id="fixPerDiv" style="display:block;">
          <div class="form-group">
            <div class="col-lg-11 col-lg-offset-1">
              <div class="table-responsive">
              <table class="table" id = 'commision_tbl' >
              <tr>
                  <td width = '20%'>Start price</td>
                  <td width = '20%'>End price</td>
                  <td width = '20%'>Start date</td>
                  <td width = '20%'>End date</td>
                  <td width = '20%'>Comission</td>
                  <td>&nbsp;</td>
              </tr>

              <tr>
                <td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
                <td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
                <td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
                <td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
                <td><input type="number" name="commissions_amount[]" class="form-control"  value="" placeholder="Commision price" required="required"/></td>
                <td>&nbsp;</td>
              </tr>

              <tr>
                    <td colspan="6" align = "center">
                        <input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
                    </td>
                  </tr>
                </table>

                    </div>
                  </div>
                </div>
              </div>

Html for monthly/fixed div

<div id="monYearDiv" style="display:none;">
               <div class="form-group">
                   <div class="col-lg-11 col-lg-offset-1">
                 <div class="table-responsive">
             <table class="table" id = 'commision_tb2' >
             <tr>

                 <td width = '30%'>Start date</td>
                 <td width = '30%'>End date</td>
                 <td width = '30%'>Comission</td>
                 <td>&nbsp;</td>
             </tr>
             <tr>
               <td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
               <td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
               <td><input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required"/></td>
               <td>&nbsp;</td>
             </tr>
             <tr>
              <td colspan="4" align = "center">
                <input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info">
              </td>
            </tr>
             </table>

         </div>
           </div>
         </div>
       </div>

Jquery code:

<script>
$(document).ready(function() {
  console.log('called');
   $('input[type=radio][name=comission_type]').change(function() {
       if (this.value == '0' || this.value == '1') {

         $("#fixPerDiv").css("display","block");
         $("#monYearDiv").css("display","none");

       }
       else if (this.value == '2' || this.value == '3') {

           $("#fixPerDiv").css("display","none");
           $("#monYearDiv").css("display","block");
       }
   });
});
</script>

Answer 1

So you're trying to use the value to toggle? Well, when you're getting the value, you're using this.value -- I've changed that to using jQuery's $(this).val()

Also, rather than using the ifs that you're using, I used a switch case -- easier on my old eyes.

If these aren't quite what you're looking for, let me know. I'll edit the javascript depending on your comments if you need.

So, in examining your comment, I realized that I'd totally missed the problem. What you might want to consider is to create EACH form as a separate entity -- the problem you're encountering happens when you have multiple fields with the same name (as start_date and end_date which appear when either form is displayed).

I've edited the demo to create each toggled element as its own form, and in this iteration, when you click the 'add more' button, it's simply logging the serialized form data to the console, so as to show that you aren't getting empty form data in the serialized stream.

Hope this helps!

 $(document).ready(function() { $('input[type=radio][name=comission_type]').on("change", function() { toggleDivs($(this).val()) }); $("input[type='button']" ).on("click", function(){ console.log($(this).parents("form").serialize() ); }) function toggleDivs(toggleVal) { console.log(toggleVal) switch (toggleVal) { case '0': case '1': $("#fixPerDiv").show(); $("#monYearDiv").hide(); break; case '2': case '3': $("#fixPerDiv").hide(); $("#monYearDiv").show(); break; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label> <div class="col-lg-10" required> <label class="custom-control custom-control-primary custom-radio"> <input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked"> <span class="custom-control-indicator"></span> <span class="custom-control-label">Fixed price</span> </label> <label class="custom-control custom-control-primary custom-radio"> <input class="custom-control-input" type="radio" name="comission_type" value="1"> <span class="custom-control-indicator"></span> <span class="custom-control-label">Percentage wise</span> </label> <label class="custom-control custom-control-primary custom-radio"> <input class="custom-control-input" type="radio" name="comission_type" value="2"> <span class="custom-control-indicator"></span> <span class="custom-control-label">Monthly</span> </label> <label class="custom-control custom-control-primary custom-radio"> <input class="custom-control-input" type="radio" name="comission_type" value="3"> <span class="custom-control-indicator"></span> <span class="custom-control-label">Yearly</span> </label> </div> <form name="fixedForm"> <div id="fixPerDiv" style="display:block;"> <div class="form-group"> <div class="col-lg-11 col-lg-offset-1"> <div class="table-responsive"> <table class="table" id='commision_tbl'> <tr> <td width='20%'>Start price</td> <td width='20%'>End price</td> <td width='20%'>Start date</td> <td width='20%'>End date</td> <td width='20%'>Comission</td> <td>&nbsp;</td> </tr> <tr> <td> <input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /> </td> <td> <input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required" /> </td> <td> <div class="input-with-icon"> <input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required" /><span class="icon icon-calendar input-icon"></span></div> </td> <td> <div class="input-with-icon"> <input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required" /><span class="icon icon-calendar input-icon"></span></div> </td> <td> <input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required" /> </td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" align="center"> <input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info"> </td> </tr> </table> </div> </div> </div> </div> </form> <form name="monYearForm"> <div id="monYearDiv" style="display:none;"> <div class="form-group"> <div class="col-lg-11 col-lg-offset-1"> <div class="table-responsive"> <table class="table" id='commision_tb2'> <tr> <td width='30%'>Start date</td> <td width='30%'>End date</td> <td width='30%'>Comission</td> <td>&nbsp;</td> </tr> <tr> <td> <div class="input-with-icon"> <input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required" /><span class="icon icon-calendar input-icon"></span></div> </td> <td> <div class="input-with-icon"> <input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required" /><span class="icon icon-calendar input-icon"></span></div> </td> <td> <input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required" /> </td> <td>&nbsp;</td> </tr> <tr> <td colspan="4" align="center"> <input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info"> </td> </tr> </table> </div> </div> </div> </div> </form>