ラジオボタンの選択で入力フィールドを非表示にする方法

Question

ラジオボタンが4つあり（固定、パーセント、月次、年次）、2つのボタンには共通フィールドがあり、他の2つには共通フィールドがあります。固定とパーセントの2つのdivsと、毎月と毎年のその他のボタンを追加して作成しました。問題は、毎月のdiv（複数行のデータ）を入力するとデータが取得されますが、0番目の位置は空白になり、データベースに0として格納されます。このソリューションは、divを1つだけ持ち、ラジオをベースにしていますボタン私はフィールドを隠して表示するだけで、それは私が望むものです。

HTMLコード月額固定/ 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のコードのラベル

<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コード固定/割合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用：

<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

この値を使用して切り替えようとしていますか？値を取得したら、これを使用しています。値 - jQueryの$（this）.val（）を使用するように変更しました

また、if使用して、私はスイッチケースを使用しました - 私の古い目に簡単。

これはあなたが探しているものではない場合は、私に教えてください。あなたのコメントに応じてJavaScriptを編集します。

あなたのコメントを調べると、私はこの問題を完全に逃してしまったことに気付きました。考慮する必要があるのは、別のエンティティとしてEACHフォームを作成することです。同じ名前の複数のフィールド（いずれかのフォームが表示されたときに表示されるstart_dateとend_date）を複数持つフィールドで発生する問題が発生します。

トグルされた各要素を独自のフォームとして作成するためのデモを編集しました。この繰り返しでは、「追加」ボタンをクリックすると、シリアライズされたフォームデータがコンソールに表示されますシリアライズされたストリームの空のフォームデータを取得していないことを確認します。

希望すると便利です。

$(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>