如何隱藏單選按鈕選擇的輸入字段

Question

我有四個單選按鈕（固定，百分比，每月，每年），兩個按鈕具有公共字段，另外兩個具有公共字段。我創建了兩個div用於固定和百分比以及其他每月和每年添加更多按鈕。問題是，當我輸入數據爲每月股利（多行），我得到的數據，但第零的位置是空白的，它被存儲在數據庫中爲0.解決方案是隻有一個股利，並基於收音機按鈕我只需要隱藏和顯示字段，這就是我想要的。

HTML代碼標籤

<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月/定格

<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代碼：

<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

所以你試圖使用該值切換？那麼，當你得到的價值，你使用this.value - 我已經改變，使用jQuery的$（this）.val（）

此外，而不是使用ifs，你是使用，我用了一個開關盒 - 在我的老眼睛上更容易。

如果這些都不是你想要的，請告訴我。如果需要，我會根據您的意見編輯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>