Question

我有html表格，其中存在2个单选按钮。 1）固定2）分层。

固定单选按钮有2个字段：1）费用2）额外费用

分层单选按钮有3个字段：1）第1层2）第1层3美元）第2层

因此，如果选择固定单选按钮，则应显示“费用”和“附加费用”字段。

如果选择了Tiered单选按钮，则只显示“Tier 1％”和“Tier 1 $”，“Tier 2％”和“Additional Fees”字段。

现在第一个问题是：首次加载页面后，它显示费用和加费费用字段。没关系。但如果我选择Tiered单选按钮，它会显示所有字段，包括“费用”。但我不想只显示这个“费用”字段。

第二个问题是：如果我选择Tirered，它会处理页面，但如果选择Fixed，那么它就不会提交页面。

Html表格

<form action="agent-quote-submitted.php?property_id=<?=$property_id?>" method="post" name="regForm" id="regForm" >
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr> 
    <td>Type:</td>
    <td><input type="radio" value="F" id="offer_typef" name="offer_type" required />&nbsp;<b>Fixed</b>&nbsp;</td>
    <td><input type="radio" value="T" id="offer_typet" name="offer_type" required />&nbsp;<b>Tiered</b></td>  
    <script type="text/javascript">          
    $('#regForm').change(function() {
    if ($('#offer_typet').prop('checked')) {
        $('#show-me').show();
    } else {
        $('#show-me').hide();
    }
    });

    $('#regForm').change(function() {
    if ($('#offer_typef').prop('checked')) {
        $('#show-me2').show();
    } else {
        $('#show-me2').hide();
    }
    }); 
    </script>

</tr>
<tr>        
    <td colspan="3">
    <div id='show-me' style='display:none'> 
        <div class="form-group">    
        <table class="table table-striped table-bordered table-hover" id="dataTables-example">
        <tr>
            <td>%</td>
            <td><input name="trate1"  onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required ></td>
        </tr>
        <tr>
            <td>$</td>
            <td><input name="trate1dollar" onkeypress="validate(event)"  placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required >     </td>
        </tr>
        <tr>
            <td>%</td>
            <td><input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control"  required></td>
        </tr>
        </table>
        </div>
    </div>
    </td>       
</tr>   
<tr>     
    <div id='show-me2' style='display:none'>
    <td>%</td>
    <td>    
    <input name="feestructure" placeholder=" Fees "   class="form-control" onKeyPress="validate(event)"  value="" type="text"  id="feestructure" size="40" required>
    </td>    
    <td></td>
    </div>    
</tr>


<tr>
    <td>$</td>
    <td><span  class="required inputfield2"></span><br> 
    <input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40"  class="form-control" required>
    </td>
    <td></td>
</tr>

<tr>
    <td colspan="3"><input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary"></td>    
</tr>    
</table>
</form>

Answer 1

好吧，这让我感到困惑，我一点一点地撕掉你的表格，直到我意识到你的固定费用包裹在一个嵌套在表行周围的div中。那不行。

确保您的某个收音机已加载检查，并相应地设置显示。
确保您可以正确隐藏显示元素（您不能通过将它们包装在div中来部分隐藏行元素。这是不允许的。您可以将表包装在div中，但不能包含行或单元格。但是，可以简单地隐藏/显示tr（我在小提琴中做）。
我建议只添加一个侦听器（绑定）并将所有逻辑放在那里而不是两个不同的绑定。

我在这里做了一个小提琴：http://jsfiddle.net/C9jad/6/

$(function () {
  $('tr#feesFixed')[0].style.display = 'none';
  $('div#feesTiered')[0].style.display = 'none';
  toggleFees(); // Call this once on ready
  console.log($('#offer_typef').prop('checked'))
  console.log($('#offer_typet').prop('checked'))

  // Single binding here to call encapsulated logic
  $('#regForm input:radio').on('click', function(event){
    toggleFees();
  });

});

function toggleFees() {
  if( $('#offer_typef').prop('checked') ) {
      $('#feesTiered').hide();
      $('#feesFixed').show();
  } else {
      $('#feesFixed').hide();
      $('#feesTiered').show();
  }
};

我撕毁了几件，直到我意识到你的真正问题是非法筑巢。

但这应该会帮助你立即解决它。

Answer 2

＃1我将假设您在Bootstrap CSS框架下工作，因为您的<input>课程为form-control

＃2我删除了所有<table>代码，因为我无法理解HTML结构中的任何内容

第一个问题是：首次加载页面后，它显示费用和增加费用字段。没关系。但如果我选择Tiered单选按钮就可以了显示所有字段，包括“费用”。但我不想只显示这个 “费用”字段。

解决方法是包装：

fixed输入自己的div
tierd输入（3）到另一个div
在没有Additional fees的情况下离开div输入，因为在两种情况下都必须存在
我交换并将show-me分配给Fixed和show-me2分配给tierd（以保持组织有序）

HTML：

<form action="" method="post" name="regForm" id="regForm" >

    Type: <input type="radio" value="F" id="offer_typef" name="offer_type" required checked />&nbsp;<b>Fixed</b>&nbsp; 
          <input type="radio" value="T" id="offer_typet" name="offer_type" required />&nbsp;<b>Tiered</b>   

    <!-- Fixed -->
    <div id='show-me'>
         % <input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text"  id="feestructure" size="40" required />
    </div>

    <!-- Tierd -->
    <div id='show-me2' style='display:none'> 
        <div class="form-group">    
             % <input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required /> 

             $ <input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />      

             % <input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required /> 
         </div>
    </div>

    <!-- Additional field -->    
    $ <span  class="required inputfield2"></span><br> 
         <input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40"  class="form-control" required />

    <!-- Submit button -->
    <input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary" />     

</form>

第二个问题是：如果我选择Tirered它会处理页面但是如果选择固定然后它不提交页面。

这是因为您的所有表单输入都具有属性required，当您点击tiered单选按钮时，show-me display设置为none除非您使用JS帮助删除required属性或在服务器端验证表单，否则无法提交表单

我在JS方面进行了简单的必需更改

#offer_typef属性更改会影响div #show-me
#offer_typet属性更改会影响div #show-me2

JS：

$('#regForm').change(function() {

    if ($('#offer_typef').prop('checked')) {

       $('#show-me').show();
       $('#show-me input').attr('required');

    } else {

       $('#show-me input').removeAttr('required');
        $('#show-me').hide();

    }
    });

    $('#regForm').change(function() {
    if ($('#offer_typet').prop('checked')) {

        $('#show-me2').show();
    } else {
        $('#show-me2').hide();
    }

});

这是jsFiddle

请记住：隐藏输入（display:none;）并不意味着它不会传递给服务器！

输入字段使用Javascript和html代码显示/隐藏和提交问题

2 个答案: