Використання Ajax у формі на прикладі залежних випадаючих списків в Drupal 8

Submitted by admin on Ср, 04/13/2016 - 15:57

Нехай у вас є два випадаючих списки і вам потрібно, щоб в другому мінялись значення в залежності від вибору першого. Для цього потрібно до першого списку додати атрибут #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;
  }
  
}
?>