УрокМногошаговые (мультистеп) формы на AJAX в Drupal 7

Итак, дорогие друзья, на повестке дня у нас шикарные мультистеп формы, от которых лично я в восторге. Сразу даю ссылку на мой пример, чтобы и вы воодушевились. Не написано ни строки js, однако всё шустро работает, ещё и с сохранением состояния формы. Великий и могучий Друпал. Теперь от слов переходим к делу.

Шаг первый. Создаём страницу с формой.

function multistep_example_menu() { 
 
  $items = array(); 
 
  $items['multistep_example'] = array(
    'title' => 'Multi-step ajax form example',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('multistep_example_form'),
    'access callback' => TRUE,
  );
 
  return $items;
}


Шаг второй. Создаём форму.

Наша форма будет состоять из трёх последовательных шагов. В любой момент можно вернуться на предыдущий шаг или перейти к следующему. Итак, код формы с подробными комментариями кода:

Ссылка на код: https://gist.github.com/spleshka/6f96e47709b8d20ba8ba

Шаг третий. Создаём AJAX обработчик.

Самый сложный этап разработки. Пишем мощнейщий обработчик:

function multistep_example_ajax_callback($form, $form_state) {
  // Указываем, что хотим перезагрузить всю форму, 
  // просто вернув её целиком обратно.
  return $form;
}


Шаг четвёртый. Пишем обработчик состояний формы.

Сразу переходим к коду - там все комментарии.

Ссылка на код: https://gist.github.com/spleshka/d4e68cad163a56f1363d

Вот и всё. Постоение хорошей формы на ajax в седьмом Друпале будет состоять как минимум из этих трёх этапов: постоение формы, ajax-обработчик и обработчик самой формы. Обычно к этому списку добавляется ещё и валидация формы, но в этом примере она не нужна.

По итогу мы получили сложную (на первый взгляд) мультистеп форму, которая работает через AJAX, без написания какого-либо javascript'a, оформленную по всем правилам, абсолютно безопасную с точки зрения пробиваемости, и созданную с помощью с инструментов Друпала. Классно, правда ? :)

P.S. Исходники модуля.

Комментарии

Аватар пользователя xandeadx
xandeadx написал:

стоит заметить, что такая форма будет работать и при отключённом javascript ;)

06.03.2012 17:59
Аватар пользователя Вася
Вася написал:

Вот только ajax работать не будет ))

30.03.2012 16:58
Аватар пользователя Bublik
Bublik написал:

Красотень - однозначно в закладки :) А на 6ке такое можно замутить ? Если не приснилось, где-то встречал, что шестерошный AHAH недостаточно AHAH-истый. Сам только добавление текстовых строчек а-ля модуль Poll делал.

10.03.2012 21:04
Аватар пользователя sirega
sirega написал:

Прикольно, жаль что пока не могу переварить инфу. Если бы расписывали что куда добавлять было бы вообще супер для нас новичков.

15.04.2012 20:39
Аватар пользователя alex
alex написал:

ну если прочитать базовые материалы по созданию модулей, то станет понятно что куда.
там ничего сложного.

17.04.2012 20:44
Аватар пользователя alex
alex написал:

Спасибо за статью, очень годная информация.

17.04.2012 20:44
Аватар пользователя andypost
andypost написал:

Замечу, что кнопка "хватит" не обрабатывается через ajax и, соответственно, если на последнем шаге не поставить галок, то сообщение об ошибке вылезает в основное окно.

Если требуется создать большую форму (с большим количеством полей и своими валидаторами), то функция конструктора формы становится просто невменяемых размеров при таком подходу. Поэтому её лучше дробить на несколько.

Также для больших форм своё хранилище для значений удобнее реализовывать через ctools object cache - в модуле есть хороший пример на эту тему.

12.05.2012 22:41
Аватар пользователя greenteamer
greenteamer написал:

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

04.06.2012 14:27
Аватар пользователя greenteamer
greenteamer написал:

Разобрался все работает, получилась достаточно не простая форма, только одно осталось: как добавить поля для логина и паролья, что бы они сразу вносились в БД ??? help!

18.06.2012 23:41
Аватар пользователя repeat
repeat написал:

Разобрался все работает, получилась достаточно не простая форма, только одно осталось: как добавить поля для логина и паролья, что бы они сразу вносились в БД ??? help!

09.11.2012 19:15
Аватар пользователя Гость
Гость написал:

замечательная форма! Огромное спасибо за отличный урок. Хотелась бы увидить валидацию этой формы

13.11.2012 17:37
Аватар пользователя Валентин777
Валентин777 написал:

можно расписать для чайников, как интегрировать на своем сайте данный пример?
модуль установил...что дальше?

25.08.2013 04:07
Аватар пользователя Alex108
Alex108 написал:

Перейди по адресу sitename.dev/multistep_example и все.

14.01.2014 03:39
Аватар пользователя lionman
lionman написал:

А можно ли сделать такое для уже созданной формы, через hook_form_alter,
и какой примерно будет код. У меня есть форма добавления материала с созданными полями через админку, как добавить шаги к этим полям?

21.10.2013 12:24
Аватар пользователя Виталий
Виталий написал:

Подскажите, а как в конце данные в переменные занести. Например, возраст. Чтобы потом можно было использовать.

10.09.2014 22:38
Аватар пользователя milkovsky
milkovsky написал:

автору пиво!

25.09.2014 18:28
Аватар пользователя zniki.ru
zniki.ru написал:

Привет, работал тут по твоему туториалу.
В общем мне кажется, не правильно обработка идет и сохранения переменых.

У меня в $form_state['values'] есть только те переменные, которые я задавал в $form_state['storage'], остальные у меня в $form_state['input'], до конца еще не разобрался, где косяк.

Вот кстати другой подход к реализации многошаговой формы http://davidsonj.com/blog/how-create-multi-step-form-drupal-7

23.04.2015 13:41
Аватар пользователя zniki.ru
zniki.ru написал:

Я нашел.
Когда '#limit_validation_errors' => array(),
то в values ничего не попадает.

23.04.2015 15:15

Комментировать