Итак, из предыдущих двух уроков мы с вами научились создавать простейшую форму, а так же писать функции валидации и обработки формы, сейчас же мы займемся выполнением данных функций с использованием Ajax, т.е. без перезагрузки страницы. Данная технология в Drupal 7 выполняется довольно просто, я конечно же будут использовать эту же форму, которую мы писали в предыдущих двух уроках.
Данную реализацию можно разделить на 2 этапа:- Определить элемент формы, по которому у нас будет выполняться Ajax функция
- Написать собственно функцию, которая будет отдавать результат в наш браузер
В качестве элемента формы, мы естественно будем использовать нашу кнопку отправки формы.
Хочу заметить, что Ajax функцию можно определить практически для любого элемента формы.
Для того, что бы сказать Drupal, что после нажатия на кнопку необходимо выполнить Ajax функцию, нужно дописать следующих код в элемент формы:
<?php // Описали кнопку отправки форму '#type' => 'submit', // тип поля '#value' => t('отправить форму'), // текст кнопки формы 'callback' => 'myform_ajax_callback', // функция которая будет вызываться после нажатия на кнопку 'wrapper' => 'myform-form', // id формы 'event' => 'click', ), );
Как вы видите у нас добавился дополнительный массив с ключем «#ajax», который так же содержит массив с ключами
- callback – здесь мы указываем название функции, которая должна вызваться после нажатия на кнопку
- wrapper – здесь указываем id нашей формы, после выполнения Ajax функции именно в этот id придет результат выполнения нашей формы
Теперь очистим кеш сайта, заполним форму и отправим ее.
После нажатия на кнопку видим, что пошел процесс выполнения Ajax, но результат выполнения мы не увидим, он появится, если теперь мы обновим страницу
Связано это с тем, что мы лишь определили название функции, которая будет выполняться после нажатия на кнопку, но мы ее не написали, давайте это исправим и напишем функцию:
<?php /** * Callback ajax form */ function myform_ajax_callback($form, &$form_state){ return $form; // отдаем результат обратно в форму }
Теперь опять чистим кеш сайта и смотрим, как работает наша форма
Как вы видите, теперь наша форма полноценно выполняется через Ajax т.е. срабатывают функции валидации и обработки формы, вы можете это проверить, если в первое поле введете не числовые значения:
Полный код модуля (файл myform.module)
<?php /** * implements hook_menu() */ function myform_menu(){ 'title' => 'Form API', 'page callback' => 'drupal_get_form', 'access callback' => TRUE ); return $items; } /** * Callback myform */ function myform_form($form, &$form_state) { // Описали первое текстовое поле '#type' => 'textfield', // тип поля '#title' => t('первое текстовое поле'), // заголовок поля ); // Описали второе текстовое поле '#type' => 'textfield', // тип поля '#title' => t('второе текстовое поле'), // заголовок поля ); // Описали кнопку отправки форму '#type' => 'submit', // тип поля '#value' => t('отправить форму'), // текст кнопки формы 'callback' => 'myform_ajax_callback', // функция которая будет вызываться после нажатия на кнопку 'wrapper' => 'myform-form', // id формы 'event' => 'click', ), ); return $form; } /** * Callback submit * Implements hook_form_submit */ function myform_form_submit($form, &$form_state){ $output = 'Первое текстовое поле - ' .$form_state['values']['onetextfield'] .'<br>'; $output .= 'Второе текстовое поле - ' .$form_state['values']['twotextfield']; drupal_set_message($output); } /** * Implements hook_form_validate */ function myform_form_validate($form, &$form_state){ form_set_error('onetextfield', t('Для данного поля возможно, только числовые значения')); } } /** * Callback ajax form */ function myform_ajax_callback($form, &$form_state){ return $form; // отдали результат обратно в форму }
На этом можно закончить. Теперь вы тоже должны понимать как прикрутить к форме Ajax.
Комментарии (5)
забыл в сабмите
здесь это не нужно, мы не перестраиваем форму.
Павел, а как удалить форму в случае успешной отправки?
Т.е. если есть ошибки - выводим форму и сообщения, а если валидация прошла успешно, и форма была отправлена - показать только уведомление.
Тоже интересует этот вопрос!
Проверяете значения в $form_state и дальше делаете, что вам нужно.