Display child fields only after master field is selected
2 years 9 months ago - 2 years 9 months ago #81303
by iamrobert
I wanted to hide the child fields until the master field is selected. You can do it via FLEXIcontent types.
If we have 4 fields like this with LIBRARY as the master:
The LIBRARY field is setup as follows:
Steps:
1. Hide the Slave/Children fields in item Form - Backend
2. Display the Slave/Children fields on load (if already saved):
3. When changing the radio switch values:
Hope this helps.
If we have 4 fields like this with LIBRARY as the master:
The LIBRARY field is setup as follows:
Steps:
1. Hide the Slave/Children fields in item Form - Backend
Code:
// HIDE THE SLAVE FIELDS
$('#label_outer_fcfield_208, #container_fcfield_208').hide();
$('#label_outer_fcfield_209, #container_fcfield_209').hide();
$('#label_outer_fcfield_210, #container_fcfield_210').hide();
2. Display the Slave/Children fields on load (if already saved):
Code:
//SHOW ON LOAD
if ($('#custom_library_cat_0 input[value="care"]').is(':checked') == true) {
$('#label_outer_fcfield_208, #container_fcfield_208').show();
}
if ($('#custom_library_cat_0 input[value="training"]').is(':checked') == true) {
$('#label_outer_fcfield_209, #container_fcfield_209').show();
}
if ($('#custom_library_cat_0 input[value="health"]').is(':checked') == true) {
$('#label_outer_fcfield_210, #container_fcfield_210').show();
}
3. When changing the radio switch values:
Code:
//DISPLAY ON CLICK
$('input[name="custom[library_cat][0]"]').change(
function () {
//RADIO CARE VALUE
if (this.checked && this.value == 'care') {
console.log('care');
$('#label_outer_fcfield_209, #container_fcfield_209').hide();
$('#label_outer_fcfield_210, #container_fcfield_210').hide();
$('#label_outer_fcfield_208, #container_fcfield_208').show();
}
//RADIO HEALTH VALUE
if (this.checked && this.value == 'training') {
console.log('training');
$('#label_outer_fcfield_208, #container_fcfield_208').hide();
$('#label_outer_fcfield_210, #container_fcfield_210').hide();
$('#label_outer_fcfield_209, #container_fcfield_209').show();
}
//RADIO HEALTH VALUE
if (this.checked && this.value == 'health') {
console.log('health');
$('#label_outer_fcfield_208, #container_fcfield_208').hide();
$('#label_outer_fcfield_209, #container_fcfield_209').hide();
$('#label_outer_fcfield_210, #container_fcfield_210').show();
}
});
Hope this helps.
Last edit: 2 years 9 months ago by iamrobert.
Please Log in or Create an account to join the conversation.
Time to create page: 0.351 seconds
Last FLEXI-site
... loading images 
