Change the state of an element based on another element (field) | Drupal 8

Change the state of an element based on another element (field)

Submitted by editor on Tue, 01/31/2017 - 17:18
Question

How to change the visibility of an afield element based on another field element ?

The field API adds JavaScript (AJAX) to change the state of an element (form)  based on another element.

Example 1. Show/Hide a field depend on a select box value

$form['testfield'] = array(
  '#type' => 'select',
  '#title' => $this->t('Select'),
  '#options' => array('a' => 'a', 'b' => 'b', 'c' => 'c'),
);
$form['display'] = array(
  '#title' => t('Display B'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[id="edit-testfield"]' => array('value' => 'b'),
    ),
  ),
);
$form['display2'] = array(
  '#title' => t('Display C value'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      'select[name="testfield"]' => array('value' => 'c'),
    ),
  ),
);
$form['display3'] = array(
  '#title' => t('Display C value : Short syntax'),
  '#type' => 'textfield',
  '#states' => ['visible' => [':input[name="testfield"]' => ['checked' => TRUE],],],
);

Example 2 : Show/Hide field according to the value of a checkbox

$form['testfield'] = array(
  '#type' => 'checkbox',
  '#title' => $this->t('A check box'),
);
$form['display1'] = array(
  '#title' => t('1 - Just display : visible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[name="testfield"]' => array('checked' => TRUE),
    ),
  ),
);
$form['display2'] = array(
  '#title' => t('2 - Just display : visible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[id="edit-testfield"]' => array('checked' => FALSE),
    ),
  ),
);

Example 3 : Show/Hide Fields using a value of an array (field)

$form['settings'] = [
  '#type' => 'details',
  '#title' => 'Settings',
  '#tree' => TRUE,
  '#open' => TRUE,
];
$form['settings']['testfield'] = array(
  '#type' => 'checkbox',
  '#title' => $this->t('A check box'),
);
$form['settings']['display1'] = array(
  '#title' => t('1 - Just display : visible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[name="settings[testfield]"]' => array('checked' => TRUE),
    ),
  ),
);
$form['display2'] = array(
  '#title' => t('2 - Just display : visible if NOT checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[id="edit-settings-testfield"]' => array('checked' => FALSE),
    ),
  ),
);
$form['display3'] = array(
  '#title' => t('3 - display : visible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[name$="[testfield]"]' => array('checked' => TRUE),
    ),
  ),
);

Example 4 : Usage of container : Show/Hide a Test (#Markup : type = markup)

$form['testfield'] = array(
  '#type' => 'checkbox',
  '#title' => $this->t('A check box'),
);
$form['display'] = array(
  '#type' => 'container',
  '#states' => array(
    'visible' => array(
      ':input[id="edit-testfield"]' => array('checked' => TRUE),
    ),
  ),
);
$form['display']['a_markup'] = array(
  '#type' => 'markup',
  '#markup' => "Just a text, visible if checked",
);

 

Example 5 : Usage in a FieldFormatter (Drupal\Core\Field\FormatterBase ...)

  $elements['selectable'] = [
    '#title' => t('Selectable'),
    '#type' => 'checkbox',
    '#default_value' => $this->getSetting('selectable'),
  ];
  $elements['style'] = array(
    '#title' => t('Apply CSS'),
    '#type' => 'checkbox',
    '#default_value' => $this->getSetting('style'),
    '#states' => array(
      'visible' => array(
        ':input[name="selectable"]' => array('checked' => TRUE),
      ),
    ),
  );

 

Example 6 : Multiple posibilities (OR)

'visible' => array(
  array(
    ':input[name="name"]' => array('filled' => TRUE),
  ),
  array(
    'select[name="method"]' => array('value' => 'email'),
  ),
),
),

 
Example 7 : Multiple conditions (AND)

'visible' => array(
  array(
    ':input[name="name"]' => array('filled' => TRUE),
    'select[name="method"]' => array('value' => 'email'),
  ),
),
),

 

 

Other Examples (Not tested).

$form['testfield'] = array(
  '#type' => 'checkbox',
  '#title' => $this->t('Checkbox'),
);
//Example 2 - 1
$form['display1'] = array(
  '#title' => t('1 - Just display : visible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[name$="[testfield]"]' => array('checked' => TRUE),
    ),
  ),
);
//Example 2 - 2
$form['display2'] = array(
  '#title' => t('2 - Just display : visible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'visible' => array(
      ':input[name$="settings[testfield]"]' => array('checked' => TRUE),
    ),
  ),
);
//Example 2 - 3
$form['display3'] = array(
  '#type' => 'container',
  '#states' => array(
    'visible' => array(
      ':input[id="edit-settings-testfield"]' => array('checked' => TRUE),
    ),
  ),
);
$form['display3']['a_markup'] = array(
  '#type' => 'markup',
  '#markup' => "3 - Just a text, visible if checked",
);
//Example 2 - 4
$form['display4'] = array(
  '#title' => t('4 - invisible if checked'),
  '#type' => 'textfield',
  '#states' => array(
    'invisible' => array(
      ':input[id="edit-settings-testfield"]' => array('checked' => TRUE),
    ),
  ),
);

 

Help : https://api.drupal.org/api/drupal/core%21includes%21common.inc/function/drupal_process_states/8.2.x
More examples : https://www.lullabot.com/articles/form-api-states

Add new comment