Использование Ajax в форме на примере зависимых выпадающих списков в Drupal 8

Submitted by admin on Wed, 04/13/2016 - 15:56

Пусть у вас есть два выпадающих списка и вам нужно, чтобы во втором менялись значения в зависимости от выбора первого. Для этого нужно в первый список добавить атрибут #ajax. Атрибут #ajax принимает массив в качестве значения. Сам массив имеет ключи callback и wrapper. Параметр callback может содержать: масив, первое значение которого является объект, а второе значение - название функции этого объекта

'callback' => [$this, 'changeOptionsAjax']

путь к функции в классе

'callback' => '\Drupal\helloworld\Form\helloworldForm::changeOptionsAjax'

или название функции с двумя двоеточиями спереди, если функции принадлежит данному классу

'callback' => '::changeOptionsAjax'

Любой из этих вариантов будет работать. Далее в параметр wrapper указать id элемента, в котором нужно менять значение

'wrapper' => 'second_field_wrapper'

После этого обернем наш второй элемент в div с атрибутом id, такой какой мы написали в параметры wrapper

'#prefix' => '<div id="second_field_wrapper">', '#suffix' => '</div>'

После этого приступим к созданию самой callback функции, которая будет возвращать элемент, который нужно поменять, в нашем случае второй элемент

return $form['second_field'];

Также нужно написать функцию, которая будет выбирать значение для второго элемента в зависимости от выбранного значения первого элемента. Для этого в функцию передадим переменную $form_state, с ее получаем значение первого элемента и возвращаем массив значений, которые будут во втором элементе. Вот и все. Теперь выбирая в первом списке любое значение и во втором списке с помощью AJAX изменятся значения.

Смотреть весь код:

<?php

/**
 * @file
 * Contains \Drupal\helloworld\Form\helloworldForm.
 */

namespace Drupal\helloworld\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class helloworldForm extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormID() {
    return 'helloworld_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
	$options = [
	  'node' => 'Node',
	  'user' => 'User'
	];
	$form['first_field'] = [
      '#type' => 'select',
      '#title' => t('First field'),
      '#options' => $options,
	  '#ajax' => [
		'callback' => [$this, 'changeOptionsAjax'],
		// 'callback' => '\Drupal\helloworld\Form\helloworldForm::changeOptionsAjax',
		// 'callback' => '::changeOptionsAjax',
		'wrapper' => 'second_field_wrapper',
	  ],
    ];
    $form['second_field'] = [
      '#type' => 'select',
	  '#title' => t('Second field'),
      '#options' => $this->getOptions($form_state),
      '#prefix' => '<div id="second_field_wrapper">',
      '#suffix' => '</div>',
    ];
	$form['submit'] = [
      '#type' => 'submit',
      '#value' => 'Submit',
    ];
    return $form;
  }
  
  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {}

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {}
  
  /**
   * Ajax callback to change options for second field.
   */
  public function changeOptionsAjax(array &$form, FormStateInterface $form_state) {
	return $form['second_field'];
  }

  /**
   * Get options for second field.
   */
  public function getOptions(FormStateInterface $form_state) {
	if ($form_state->getValue('first_field') == 'user') {
      $options = [
	    'admin' => 'Admin',
		'manager' => 'Manager'
      ];
    }
    else {
      $options = [
	    'article' => 'Article',
		'basic_page' => 'Basic page'
      ];
    }
	return $options;
  }
  
}
?>