Support Forum
Support › Meta Box Conditional Logic › Fields made visible later in form
I am having an issue with conditional logic, and I thought of a workaround but having issues with that too.
Main issue: I have buttons to toggle the visibility of fields inside a group based on classes eg:
[
'name' => __( 'Reference', 'your-text-domain' ),
'id' => $prefix . 'academicreference_group',
'type' => 'group',
'clone' => true,
'class' => 'rs_p13 repeatable-section',
'tab' => 'page_13',
'fields' => [
[
'id' => 'current_selection', // This creates a value and updates as you scroll through the 'pages' that matches the class
'type' => 'hidden',
'std' => 'ref_p13-1',
'class' => 'ref-group',
],
[
'type' => 'custom_html',
'std' => __( 'Example field', 'your-text-domain' ),
'class' => 'sub-instruction-class-heading ref-group ref_p13-1 show-reference-page',
'save_field' => false,
],
[
'id' => $prefix . 'next_ref_p13-1',
'type' => 'button',
'std' => __( '<i class="fas fa-long-arrow-right"></i>', 'your-text-domain' ),
'columns' => 6,
'save_field' => false,
'attributes' => [
'class' => 'ref-nav next-btn-group ref_p13-1 show-reference-page ref-group',
'data-current' => 'ref_p13-1',
'data-target-group' => 'ref_p13-2',
],
],
[
'name' => __( 'Source type', 'your-text-domain' ),
'id' => 'example2',
'type' => 'taxonomy_advanced',
'taxonomy' => ['output'],
'field_type' => 'radio_list',
'placeholder' => __( 'The field that much conditional visibility on this page..', 'your-text-domain' ),
'required' => $required,
'class' => 'ref_p13-2 ref-label ref-group',
'columns' => 12,
'query_args' => [
'orderby' => 'name',
'order' => 'ASC',
'childless' => true,
],
],
[
'type' => 'custom_html',
'id' => 'field2',
'std' => __( 'Random page', 'your-text-domain' ),
'class' => 'sub-instruction-class-group ref-group ref_p13-2',
'save_field' => false,
'visible' => [['example2', 'in', ['922', '1304']]],
],]
So this works correctly, you can go to the next 'page' and it shows the correct fields. You select 922 in example2 field and field2 shows correctly. You then click through to the next page where there is another taxonomy radio_list with conditional visibility, but when you click an option there. Then the field2 appears. There is a CSS override of display: block that is not coming from me and I can't control it, so while all my pages work, triggering a second conditional condition means my settings are overridden and the first appears. This is what I mean: https://jam.dev/c/c21dedba-c5b3-4705-ac79-9e3bbbc41839
As a workaround, I tried to use 'hidden' => [ 'current_selection', '!=', 'ref_p13-2' ]
to try and add an extra way to hide the unwanted fields from the page before, and for being triggered to show . But adding this 'hidden' meant the 'visible' conditions were no longer applied and they all showed when you triggered the visibility logic.
Any suggestions much appreciated.
And just double checking - you cannot add tabs within a group field type? I am forced to use classes to manage visibility which I think why there is problematic CSS being applied
And forgot to mention, before I tried with the hidden, I tried with
'visible' => [
'when' => [
['academicoutput', 'in', [9212, 13304]],
['current_selection', '=', 'ref_p13-2'],
],
'relation' => 'and',
],
But maybe it doesn't work as the current_selection field updated with js on button click?
Hello Yasmine,
you cannot add tabs within a group field type?
Yes, correct. You can use the tab field as a top field. It doesn't work as a subfield in a group field.
Regarding the conditional logic issue, I already told you that the nested conditional logic doesn't work, in this topic https://support.metabox.io/topic/multiple-visibility-condition/?swcfpc=1
If you want to create a customization form with custom code, please contact us here https://metabox.io/contact/.