Form Api – часть 5. Изменение состояния элемента формы

Помимо всех прочих благ, которые Form API предоставляет разработчику из «коробки», он так же может вам помочь в реализации зависимых полей. Например, нам необходимо от определенного выбранного значения одного поля, показать (скрыть) другое поле. Первое что вам может прийти в голову – это использовать JS, но и на этой случай у Form API есть свое решение. Как всегда рассмотрим это дело на примере.

Допустим, у нас есть селект, с двумя значениями и ключами 0 и 1. 0 – ключ, который используется по умолчанию (при загрузке страницы). Нам необходимо при выборе пользователем значения 1 – показать дополнительное текстовое поле. Сейчас форма у нас принимает следующий вид:

<?php
/**
 * implements hook_menu()
 */
function myform_menu(){
    $items = array();
    $items['myform'] = array(
      'title' => 'Form API',
      'page callback' => 'drupal_get_form',
      'page arguments' => array('myform_form'),
      'access callback' => TRUE
    );
 
    return $items;
}
 
/**
 * Callback myform
 */
function myform_form($form, &$form_state) {
 
    // Описали поле с селектом
    $form['field_select'] = array(
      '#type' => 'select',
      '#title' => t('Выберите значение'),
      '#options' => array(
        '0' => t('Дефолтное значение'),
        '1' => t('Показать дополнительное поле'),
      ),
    );
 
    // Описали дополнительное текстовое поле
    $form['option_textfield'] = array(
      '#type' => 'textfield',
      '#title' => t('Дополнительное текстовое поле'),
    );
 
 
    // Описали кнопку отправки форму
    $form['submit'] = array(
      '#type' => 'submit',                      // тип поля
      '#value' => t('отправить форму'),         // текст кнопки формы
    );
    return $form;
}

Хочу заметить, мы не написали функции обработки и валидации формы, ибо в данном уроке в них нет необходимости, как это сделать вы можете прочитать здесь

Теперь приступаем к реализации нашей задачи. Здесь нам необходимо понимать, что есть два типа полей:

• Зависимое поле
• Влияющее поле

Зависимое поле – поле, которое принимает любое из состояний формы, например как скрытие или показ.

Влияющее поле – поле, от которого зависит состояние зависимого поля.

Итак, что бы Drupal понимал, что для зависимого поля необходимо отслеживать состояние, то для данного поля необходимо предать в массив с ключом «#states» необходимое состояние элемента формы, а так же ID влияющего поля с необходимым значением данного (влияющего) поля. На деле у нас это выглядит так:

<?php
/**
 * implements hook_menu()
 */
function myform_menu(){
    $items = array();
    $items['myform'] = array(
      'title' => 'Form API',
      'page callback' => 'drupal_get_form',
      'page arguments' => array('myform_form'),
      'access callback' => TRUE
    );
 
    return $items;
}
 
/**
 * Callback myform
 */
function myform_form($form, &$form_state) {
 
    // Описали поле с селектом
    $form['field_select'] = array(
      '#type' => 'select',
      '#title' => t('Выберите значение'),
      '#options' => array(
        '0' => t('Дефолтное значение'),
        '1' => t('Показать дополнительное поле'),
      ),
    );
 
    // Описали дополнительное текстовое поле
    $form['option_textfield'] = array(
      '#type' => 'textfield',
      '#title' => t('Дополнительное текстовое поле'),
      '#states' => array(                                         // сказали Drupal, что для данного поля необходимо отслеживать состояние
        'visible' => array(                                       // указали необходимое состояние 
          ':input[name="field_select"]' => array('value' => 1),   // указали имя влияющего поля  поля и его значение, при котором данное состояние должно сработать
        ),
      ),
    );
 
 
    // Описали кнопку отправки форму
    $form['submit'] = array(
      '#type' => 'submit',                      // тип поля
      '#value' => t('отправить форму'),         // текст кнопки формы
    );
    return $form;
}

Где,

• visible – состояние формы (показать)
• input[name="field_select"] – имя влияющего поля
• value=>1 – значение влияющего поля

Для тех, кто активно использует Jquery, из данной конструкции все должно стать предельно ясно.

Теперь, после обновления страницы вы увидите, что у нас скрыто «дополнительное текстовое поле»

А если в селекте мы выберем «Показать дополнительное поле» - то нам станет доступным текстовое поле:

• enabled – элемент будет доступен для редактирования. Если значение влияющего поля не выбрано, то будет добавлен атрибут disabled="disabled"
• disabled – элемент не доступен для редактирования. Добавляет к элементу аттрибут disabled="disabled"
• required – элемент становится обязательным для заполнения. Добавляет к label элементу формы CSS класс - form-required, в span обертке
• optional – элемент станет не обязательным для заполнения. Если значение влияющего поля не выбрано, то к label элементу формы добавится CSS класс - form-required, в span обертке
• visible – элемент будет показан. Если значение влияющего поля не выбрано, то элемент будет скрыт, через display:none;
• invisible – элемент будет скрыт
• сhecked – элемент будет отмечен, используется для элементов формы с типом checkbox и radio
• unchecked – с элемента будет снята отметка, используется для элементов формы с типом checkbox и radio
• expanded – элемент будет развернут, используется для элементов с типом fieldset
• collapsed – элемент будет свернут, используется для элементов с типом fieldset

Так же существует проверка состояния влияющего поля (условное состояние), в нашем случае условным состоянием является value.

• empty – влияющее поле имеет пустое значение
• filled – влияющее поле имеет не пустое значение
• checked – влияющее поле отмечено, используется для элементов формы влияющего поля с типом checkbox и radio
• unchecked - влияющее поле не отмечено, используется для элементов формы влияющего поля с типом checkbox и radio
• expanded – влияющее поле развернуто, используется для элементов формы влияющего поля с типом fieldset
• collapsed - влияющее поле не развернуто, используется для элементов формы влияющего поля с типом fieldset
• value – влияющее поле имеет значение

Для тех кому этой информации не достаточно, то более подробно можно почитать и посмотреть примеры здесь

Теперь вы видите, что мы может отслеживать состояние элементов формы без написания дополнительного JS. На этом можно закончить.