仅从选定的单选按钮选项提交表单数据

Question

我正在处理用户从单选按钮中选择一个选项的表单。

然后根据选项，会出现一个文本字段视图。然后用户输入所需的数据并提交表单。

选项有不同的选项，提交的数据应该不同。

我的挑战是如何仅提交所选单选按钮字段中的数据。

任何人都好心帮助。谢谢

$(function () {
      $('input[type="radio"]').on("click",function () {
        $(".selections").hide(); // hide them all
        if (this.value=="both") $(".selections").show(); // show both
        else $("#"+this.value).show(); // show the one with ID=radio value
      });
      $('.selections input[type="checkbox"]').on("click",function() {
        $(this).next().toggle(this.checked); // hide if not checked
      });
      $('.selections input[type="text"]').each(function() { // initialise
            $(this).toggle($(this).prev().is(":checked")); 
      });
    });

.selections { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
            <div class="form-group">
              <label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
              <div class="col-md-6">
                <input type="radio" name="billing" value="percentage" >Percentage
                <input type="radio" name="billing" value="flat_rate" >Flat Rate
                <input type="radio" name="billing" value="variable" >Variable
                </br>
              </div>
            </div>
            <!-- percentage radio option -->
            <div id="percentage" class="selections">
              <input type="hidden" name="bill_type" value="percentage"> 
              <div class="form-group">
                <label for="rate" class="col-md-4 control-label">Rate</label>
                <div class="col-md-4">
                  <input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
                </div>
              </div>
              <input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
            </div>
            
            <!-- flat_rate radio button option -->
            <div id="flat_rate" class="selections">
              <input type="hidden" name="bill_type" value="flat_rate">
              <div class="form-group">
                <label for="rate" class="col-md-4 control-label">Rate</label>
                <div class="col-md-4">
                  <input id="rate" placeholder="10" type="number" class="form-control" name="rate"  autofocus>
                </div>
              </div>
              <input type="date" class="form-control" name="send_at">
            </div>
            
            <!-- variable radio button option -->
            <div id="variable" class="selections">
              <input type="hidden" name="bill_type" value="variable">
              <div class="form-group">
                <label for="limit" class="col-md-4 control-label">Limit</label>
                <div class="col-md-4">
                  <input id="limit" placeholder="10" type="number" class="form-control" name="limit"   autofocus>
                </div>
              </div>
              <div class="form-group">
                <label for="rate" class="col-md-4 control-label">Rate</label>
                <div class="col-md-4">
                  <input id="rate" placeholder="10" type="number" class="form-control" name="rate"  autofocus>
                </div>
              </div>
              <input type="date" name="send_at">
              <br/>
            </div>
            
            <br/>
            <br/>
            <div class="form-group">
              <div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
                <button type="button" class="btn btn-sm btn-default btn-flat" 
                  data-dismiss="modal">
                <i class="fa fa-times" aria-hidden="true"> Close</i> 
                </button>
                <button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
                <i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
                </button>
              </div>
            </div>
            </form>

Answer 1

您应该尝试使用Bootstrap Tabs [imho]，但如果您想使用收音机... 禁用所有输入将阻止它们被提交：

$("#div :input").attr("disabled", true);

或

$('#div').find('input, textarea, button, select').attr('disabled','disabled');

来自this post的代码

Answer 2

首先你不需要重复相同的字段。试试这样

$(function () {
      $('input[name="billing"]').on('change',function(){
          $('#bill_type').val($(this).val());
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
            <div class="form-group">
              <label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
              <div class="col-md-6">
                <input type="radio" name="billing" value="percentage" >Percentage
                <input type="radio" name="billing" value="flat_rate" >Flat Rate
                <input type="radio" name="billing" value="variable" >Variable
                </br>
              </div>
            </div>
            <!-- percentage radio option -->
            <div id="percentage" class="selections">
              <input type="hidden" id="bill_type" name="bill_type" value=""> 
              <div class="form-group">
                <label for="rate" class="col-md-4 control-label">Rate</label>
                <div class="col-md-4">
                  <input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
                </div>
              </div>
              <input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
            </div>
            
            
            <br/>
            <br/>
            <div class="form-group">
              <div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
                <button type="button" class="btn btn-sm btn-default btn-flat" 
                  data-dismiss="modal">
                <i class="fa fa-times" aria-hidden="true"> Close</i> 
                </button>
                <button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
                <i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
                </button>
              </div>
            </div>
            </form>

提交后你可以根据bill_type的值做任何事情。