Помощь начинающим веб
разработчикам

Form API - часть 3. Выполнение функций обработки и валидации через Ajax.

04.02.2015

Итак, из предыдущих двух уроков мы с вами научились создавать простейшую форму, а так же писать функции валидации и обработки формы, сейчас же мы займемся выполнением данных функций с использованием Ajax, т.е. без перезагрузки страницы. Данная технология в Drupal 7 выполняется довольно просто, я конечно же будут использовать эту же форму, которую мы писали в предыдущих двух уроках.

Данную реализацию можно разделить на 2 этапа:
  1. Определить элемент формы, по которому у нас будет выполняться Ajax функция
  2. Написать собственно функцию, которая будет отдавать результат в наш браузер

В качестве элемента формы, мы естественно будем использовать нашу кнопку отправки формы.

Хочу заметить, что Ajax функцию можно определить практически для любого элемента формы.

Для того, что бы сказать Drupal, что после нажатия на кнопку необходимо выполнить Ajax функцию, нужно дописать следующих код в элемент формы:

  1. <?php
  2. // Описали кнопку отправки форму
  3. $form['submit'] = array(
  4. '#type' => 'submit', // тип поля
  5. '#value' => t('отправить форму'), // текст кнопки формы
  6. '#ajax' => array( // сказали Drupal, что используем Ajax
  7. 'callback' => 'myform_ajax_callback', // функция которая будет вызываться после нажатия на кнопку
  8. 'wrapper' => 'myform-form', // id формы
  9. 'event' => 'click',
  10. ),
  11. );

Как вы видите у нас добавился дополнительный массив с ключем «#ajax», который так же содержит массив с ключами

  • callback – здесь мы указываем название функции, которая должна вызваться после нажатия на кнопку
  • wrapper – здесь указываем id нашей формы, после выполнения Ajax функции именно в этот id придет результат выполнения нашей формы

Теперь очистим кеш сайта, заполним форму и отправим ее.

После нажатия на кнопку, видим, что пошел процесс выполнения Ajax

После нажатия на кнопку видим, что пошел процесс выполнения Ajax, но результат выполнения мы не увидим, он появится, если теперь мы обновим страницу

Получили результат только после обновления страницы

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

  1. <?php
  2. /**
  3.  * Callback ajax form
  4.  */
  5. function myform_ajax_callback($form, &$form_state){
  6. return $form; // отдаем результат обратно в форму
  7. }

Теперь опять чистим кеш сайта и смотрим, как работает наша форма

Получили результат сразу же, после выполнения Ajax

Как вы видите, теперь наша форма полноценно выполняется через Ajax т.е. срабатывают функции валидации и обработки формы, вы можете это проверить, если в первое поле введете не числовые значения:

Сработала функция валидации

Полный код модуля (файл myform.module)

  1. <?php
  2. /**
  3.  * implements hook_menu()
  4.  */
  5. function myform_menu(){
  6. $items = array();
  7. $items['myform'] = array(
  8. 'title' => 'Form API',
  9. 'page callback' => 'drupal_get_form',
  10. 'page arguments' => array('myform_form'),
  11. 'access callback' => TRUE
  12. );
  13.  
  14. return $items;
  15. }
  16.  
  17. /**
  18.  * Callback myform
  19.  */
  20. function myform_form($form, &$form_state) {
  21. // Описали первое текстовое поле
  22. $form['onetextfield'] = array(
  23. '#type' => 'textfield', // тип поля
  24. '#title' => t('первое текстовое поле'), // заголовок поля
  25. );
  26.  
  27. // Описали второе текстовое поле
  28. $form['twotextfield'] = array(
  29. '#type' => 'textfield', // тип поля
  30. '#title' => t('второе текстовое поле'), // заголовок поля
  31. );
  32.  
  33. // Описали кнопку отправки форму
  34. $form['submit'] = array(
  35. '#type' => 'submit', // тип поля
  36. '#value' => t('отправить форму'), // текст кнопки формы
  37. '#ajax' => array( // сказали Drupal, что используем Ajax
  38. 'callback' => 'myform_ajax_callback', // функция которая будет вызываться после нажатия на кнопку
  39. 'wrapper' => 'myform-form', // id формы
  40. 'event' => 'click',
  41. ),
  42. );
  43. return $form;
  44. }
  45.  
  46. /**
  47.  * Callback submit
  48.  * Implements hook_form_submit
  49.  */
  50. function myform_form_submit($form, &$form_state){
  51. $output = 'Первое текстовое поле - ' .$form_state['values']['onetextfield'] .'<br>';
  52. $output .= 'Второе текстовое поле - ' .$form_state['values']['twotextfield'];
  53. drupal_set_message($output);
  54. }
  55.  
  56. /**
  57.  * Implements hook_form_validate
  58.  */
  59. function myform_form_validate($form, &$form_state){
  60. if(!is_numeric($form_state['values']['onetextfield'])){
  61. form_set_error('onetextfield', t('Для данного поля возможно, только числовые значения'));
  62. }
  63. }
  64.  
  65. /**
  66.  * Callback ajax form
  67.  */
  68. function myform_ajax_callback($form, &$form_state){
  69. return $form; // отдали результат обратно в форму
  70. }

На этом можно закончить. Теперь вы тоже должны понимать как прикрутить к форме Ajax.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (5)

Profile picture for user Артур
FORTIS
30.09.2015
$form_state['rebuild'] = true; 

забыл в сабмите

Profile picture for user pantey
pantey
30.09.2015

здесь это не нужно, мы не перестраиваем форму.

Profile picture for user Артур
Максим
14.05.2016

Павел, а как удалить форму в случае успешной отправки?
Т.е. если есть ошибки - выводим форму и сообщения, а если валидация прошла успешно, и форма была отправлена - показать только уведомление.

Profile picture for user Артур
Admin
04.12.2018

Тоже интересует этот вопрос!

Profile picture for user pantey
pantey
06.12.2018

Проверяете значения в $form_state и дальше делаете, что вам нужно.

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии