How to make conditional field on cmb2 plugin?

2 comments

1. “Conditional fields” seem not to be integrated within CMB2 core yet. However, there’s a plugin called CMB2 Conditionals which might help you achieve the functionality you want.

   After installing and setting up the plugin, it’d be simply achieved by setting up your fields as follows:

   A special attention to the 'attributes' key, you can play with it as per the plugin’s instructions.

   $biometabox[] = array(
       'id' => 'first-section',
       'title' => 'Member Data',
       'object_types' => array('dausfmembers'),
       'fields' => array(
           array(
            'name' => 'Gender',
            'type' => 'radio',
            'id' => $dausf.'gender',
            'options' => array(
               'Male' => 'Male',
               'Female' => 'Female',
           ),
            'attributes' => array(
            'required'    => 'required',
           )
       ),  
           array(
            'name' => 'Gender',
            'type' => 'radio',
            'id' => $dausf.'mstatus',
            'options' => array(
               'Married' => 'Married',
               'Single' => 'Single',
            ),
            'attributes' => array(
            'required'    => 'required',
           )
       ), 
           array(
            'name' => 'Husband Name',
            'type' => 'text',
            'id' => $dausf.'hname',
            'required' => true,
           ),
            'attributes' => array(
            'required' => true, // Will be required only if visible.
            'data-conditional-id' => $prefix . 'gender',
            'data-conditional-value' => 'Female',
       ),
            'attributes' => array(
            'required' => true, // Will be required only if visible.
            'data-conditional-id' => $prefix . 'mstatus',
            'data-conditional-value' => 'Married',
       ),
   ...
   
   ) );
   

   You’ll want to check the plugin’s example functions here: https://github.com/jcchavezs/cmb2-conditionals/blob/master/example-functions.php

   I hope you manage to make it you work. Good luck.

2. Although this might be a bit convoluted you can also write a custom jQuery script to show and hide fields based on the options selected:

   In your theme directory add two folders called “js” and “css” if they aren’t already there.

   Then create a file in /js called “admin_scripts.js”. And create a file in /css called “admin.css”.

   So you’ll have:

   theme_directory/css/admin.css
   theme_directory/js/admin_scripts.js

   In your functions.php add the following:

   function admin_scripts() {
   // Adding custom admin scripts file
   wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/js/admin_scripts.js', array( 'jquery' ));
   
   // Registering and adding custom admin css
   wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/css/admin.css', false, '1.0.0' );
   wp_enqueue_style( 'custom_wp_admin_css' ); 
   }
   

   Then just below this function add:

   add_action( 'admin_enqueue_scripts', 'admin_scripts' );

   In js/admin_scripts.js add the following (remember to change the ids and classes to your field’s ids and classes)

   jQuery(document).ready( function() {
       if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
           jQuery('.cmb2-field-to-display-on-select').show();
       }
       jQuery('#cmb2_select_field_id').bind('change', function (e) { 
           if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
               jQuery('.cmb2-field-to-display-on-select').show();
           }
           else{
              jQuery('.cmb2-field-to-display-on-select').hide();
           }         
       });
   });
   

   And in css/admin.css add the following:

   .cmb2-field-to-display-on-select {
       display:none;
   }
   

Comments are closed.