I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)
$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});
$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});
Related
I have created multiple checkbox with different names as seen in the code snippet and will like to get the values of each of them i.e if the user clicks on a checkbox the value 1 is stored and 0 if not clicked but I keep getting only the 0 value for all of them. It doesn't seem to be reading if I click it or not. I have tried various answers I have seen online and on this platform but to no avail.
My code snippet is:
<div class="col-xs-6 col-sm-4 border-pdf-td">
<div class="checkbox">
<label for="telecommunication">
<input name="telecommunication" type="hidden" value="0" />
<input type="checkbox" value="1" name="telecommunication" />
Telecommunication
</label>
</div>
</div>
<div class="col-xs-6 col-sm-5 border-pdf-td">
<div class="checkbox">
<label for="grocery">
<input name="grocery" type="hidden" value="0" />
<input type="checkbox" value="1" name="grocery" />
Grocery and Supermarkets
</label>
</div>
</div>
<div class="col-xs-6 col-sm-3 border-pdf-d">
<div class="checkbox">
<label for="petroleum">
<input name="petroleum" type="hidden" value="0" />
<input type="checkbox" value="1" name="petroleum" />
Petroleum
</label>
</div>
</div>
<div class="col-xs-12 col-sm-4 border-pdf-d">
<div class="checkbox">
<label for="ecommerce">
<input name="ecommerce" type="hidden" value="0" />
<input type="checkbox" value="1" name="ecommerce" />
E-Commerce
</label>
</div>
</div>
<div class="col-xs-12 col-sm-5 border-pdf-d">
<div class="checkbox">
<label for="mailorder">
<input name="mailorder" type="hidden" value="0" />
<input type="checkbox" value="1" name="mailorder" />
Mail order/telephone order (MOTO)
</label>
</div>
</div>
The current state of my JavaScript code to get the values is
var telecommunication = document.getElementsByName("telecommunication")[0].value;
var grocery = document.getElementsByName("grocery")[0].value;
var petroleum = document.getElementsByName("petroleum")[0].value;
var ecommerce = document.getElementsByName("ecommerce")[0].value;
var mailorder = document.getElementsByName("mailorder")[0].value;
I previously tried the code below but keep getting same results.
var telecommunication = document.querySelector('input[name="telecommunication"]:checked').value;
var grocery = document.querySelector('input[name="grocery"]:checked').value;
var petroleum = document.querySelector('input[name="petroleum"]:checked').value;
var ecommerce = document.querySelector('input[name="ecommerce"]:checked').value;
var mailorder = document.querySelector('input[name="mailorder"]:checked').value;
Please note that I have these checkbox and more on same form to get their values by their unique name.
I think you don't need this
<input name="telecommunication" type="hidden" value="0" />
So grab the value
var telecommunication = document.querySelector('input[name="telecommunication"]:checked') ? 1 : 0;
I think you are using a bad pattern of design for your form. If you want to send a 1 or a 0 then you should use radio buttons instead of checkboxes.
Checkboxes (and radios) are designed to be included in a request only when they are checked.
You can use a FormData object to get all the values from the form.
const form = document.querySelector('form');
form.addEventListener('change', event => {
const formData = new FormData(form);
for (const [ name, value ] of formData) {
console.log(`${name}:`, value);
}
});
.as-console-wrapper {
max-height: 100px !important;
}
<form>
<div class="form-group">
<h4>Telecommunication</h4>
<label>
Yes
<input type="radio" value="1" name="telecommunication" checked />
</label>
<label>
No
<input type="radio" value="0" name="telecommunication" />
</label>
</div>
<div class="form-group">
<h4>Grocery and Supermarkets</h4>
<label>
Yes
<input type="radio" value="1" name="grocery" checked />
</label>
<label>
No
<input type="radio" value="0" name="grocery" />
</label>
</div>
<div class="form-group">
<h4>Petroleum</h4>
<label>
Yes
<input type="radio" value="1" name="petroleum" checked />
</label>
<label>
No
<input type="radio" value="0" name="petroleum" />
</label>
</div>
<div class="form-group">
<h4>E-Commerce</h4>
<label>
Yes
<input type="radio" value="1" name="ecommerce" checked />
</label>
<label>
No
<input type="radio" value="0" name="ecommerce" />
</label>
</div>
<div class="form-group">
<h4>Mail order/telephone order (MOTO)</h4>
<label>
Yes
<input type="radio" value="1" name="mailorder" checked />
</label>
<label>
No
<input type="radio" value="0" name="mailorder" />
</label>
</div>
</form>
I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>
I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>
Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!
You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing
In a form I have a set of radio buttons with fixed donation amount and another field when a user can enter an amount of choice. For simplicity whilst processing the form I want a functionality where whatever is selected populates in the other field. I have the HTML/JS below:
$("input[id^='radio']").click(function() {
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-2" value="15.00">
<label for="amount-2">$15</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-3">$20</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-4">$25</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10"></div>
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
I have also tried
<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">
But when the first one changes it does not change anymore on subsequent clicks.
None of your IDs begin with "radio," which is what your [id^='radio'] selector is trying to match.
They begin with "amount" instead, so you should use:
$("input[id^='amount']").click(...
Also, here's a trick you can use with labels.
Instead of doing:
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
… you can put the input inside the label and avoid using the for attribute altogether:
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
Working Snippet
$("input[id^='amount']").click(function() { //CHANGE THIS
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-2" value="15.00">
$15
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$20
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$25
</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10">
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
So I have run into a little problem. I am making a Contact Form that changes according to the Users needs.
This is my html code. My goal is to First, Hide most of the Content with the first set of raio buttons. I actually managed to get that with this Javascript:
$(function() {
$('#report').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
} else {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
}
})
$('#booking').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
} else {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
}
})
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$('#privateprices').hide();
$('#companyprices').hide();
} else {
$('#privateprices').show();
$('#companyprices').show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content" align="center">
<div class="ui-content-spacer">
<h3 class="ui-bar ui-bar-a ui-corner-all ui-content-spacer">
Booking Form
</h3>
<div class="ui-body ui-body-a ui-corner-all ui-content-spacer">
<form method="post" action="">
<div class="form-field-contain">
<fieldset data-role="controlgroup">
<legend>While the page is still under developement please define your inquiry: </legend>
<input type="radio" name="settings" id="report" value="report">
<label for="report">Bug Report</label>
<input type="radio" name="settings" id="booking" value="booking" checked="checked">
<label for="booking">Booking</label>
</fieldset>
</div>
<div class="form-field-contain ui-field-contain">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="" placeholder="First Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" value="" placeholder="Last Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="email">E-Mail</label>
<input type="email" name="email" id="email" value="" placeholder="E-Mail...">
</div>
<div class="form-field-contain ui-field-contain" id="phonenumber">
<label for="tel">Phone:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="Phone #...">
</div>
<div class="form-field-contain ui-field-contain" id="dateofplay">
<label for="date">Date of event:</label>
<input type="date" name="date" id="date" value="" placeholder="Please choose a Date">
</div>
<div class="form-field-contain ui-field-contain">
<label for="message">Write a quick Message:</label>
<textarea cols="40" rows="8" name="message" id="message" placeholder="Your Message here..."></textarea>
</div>
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="studentprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="studentprice" id="studentminimal" value="studentminimal" checked="checked">Minimal</label>
<label><input type="radio" name="studentprice" id="studentsoundonly" value="studentsoundonly">Sound Only</label>
<label><input type="radio" name="studentprice" id="studentsoundandlight" value="studentsoundandlight">Sound and Light</label>
<label><input type="radio" name="studentprice" id="studentpartypackage" value="studentpartypackage">Total Party Package</label>
<label><input type="radio" name="studentprice" id="studentcustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="privateprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="privateprice" id="minimal" value="150" checked="checked">Minimal</label>
<label><input type="radio" name="privateprice" id="soundonly" value="200">Sound Only</label>
<label><input type="radio" name="privateprice" id="soundandlight" value="300">Sound and Light</label>
<label><input type="radio" name="privateprice" id="partypackage" value="400">Total Party Package</label>
<label><input type="radio" name="privateprice" id="custom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="companyprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="companyprice" id="companyminimal" value="200" checked="checked">Minimal</label>
<label><input type="radio" name="companyprice" id="companysoundonly" value="300">Sound Only</label>
<label><input type="radio" name="companyprice" id="companysoundandlight" value="400">Sound and Light</label>
<label><input type="radio" name="companyprice" id="companypartypackage" value="500">Total Party Package</label>
<label><input type="radio" name="companyprice" id="companycustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="customsetup">
<fieldset data-role="controlgroup" id="customsetup">
<legend>Custom choices:</legend>
<label><input type="checkbox" name="speakers" id="speakers" value="">Speakers</label>
<label><input type="checkbox" name="subwoofer" id="subwoofer" value="">Subwoofer</label>
<label><input type="checkbox" name="lighting" id="lighting" value="">Lighting</label>
<label><input type="checkbox" name="strobe" id="strobe" value="">Strobelight</label>
<label><input type="checkbox" name="fog" id="fog" value="">Fogmachine</label>
<label><input type="checkbox" name="table" id="table" value="">Table</label>
</fieldset>
</div>
<div class="form-field-contain">
<input type="submit" name="submit" value="Submit" data-inline="true">
<input type="reset" name="reset" value="Reset" data-inline="true">
</div>
</form>
</div>
</div>
</div>
I think the problem is that, because the first show/hide function is hiding/showing the ID's it overrides any following function. I can't wrap my head around how I can continue the code so the radio buttons that are not required are hidden.
So if,
#student is selected, #privateprices and #companyprices choices are hidden
#private is selected, #studentprices and #companyprices choices are hidden
#company is selected, #studentprices and #privateprices choices are hidden
Is it even possible or is there a easier more effective method of achieving this? Especially when I start creating the php for the form? Thanks in advance
EDIT: The last piece of code in the Javascript is my attempt hide the first set of radiobuttons.
You can check which radio button is selected in page loading and show / hide the panels. Please see working fiddle here:
https://jsfiddle.net/ranjitsachin/Leav016c/2/
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$("#studentprices").show();
$('#privateprices, #companyprices').hide();
}
});
$('#private').on('click', function() {
if ($(this).is(':checked')) {
$("#privateprices").show();
$('#studentprices, #companyprices').hide();
}
});
$('#company').on('click', function() {
if ($(this).is(':checked')) {
$("#companyprices").show();
$('#studentprices, #privateprices').hide();
}
});
Here is a working pen on how I would do it. http://codepen.io/anon/pen/jBryOa
In this pen, i added the classes of report-group and booking-group to the respective divs, added a class of hide-group to the css with a setting of display: none; and then add and remove the class hide-group based on which radio button is checked. I also added the class hide-group in the html to the div's that need to be initially hidden.
I did not add the groups to every div. just enough to show you what you need to do.