Submit form data from selected radio button option only

Question

I am working on a form where a user selects an option from radio buttons.

Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.

The options have different options and such data submitted should be different.

My challenge is how to submit only data from the selected radio button fields.

Anyone kindly help. Thank you

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

You should try to use Bootstrap Tabs [imho], but if you want to go with radios... Disabling all inputs will prevent them from being submited:

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

or

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

Code from this post

Answer 2

Firstly you don't need same field repeatedly.Try like this

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

After submission you can do whatever based on the value of bill_type.