Вы здесь

Drupal Отправка webform на ajax в Drupal 7

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

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

Как вариант можно было использовать уже готовый модуль Webform Ajax, но зачем ставить лишний модуль и лишний раз нагружать систему если можно обойтись и без него. Давайте начнем.

1. Первое что нам нужно это загрузить модуль Webform и установить его на нашем сайте. Далее создать простую форму, например контактов:

2. Вторым шагом добавим сообщение которое будет выводиться пользователям после отправки формы в настройках формы (node/[your node id]/webform/configure). Также нужно в настройках Redirection location выбрать вариант "Нет редиректа (перезагрузка текущей страницы)" ("No redirect (reload current page) ")

3. Третьим шагом мы собираемся использовать hook_form_alter, для того чтобы добавить в нашу форму обработчик AJAX и его обработчик.

  1. function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  2. if ($form_id == 'webform_client_form_ID') {
  3. $form['actions']['submit'] = array(
  4. '#type' => 'submit',
  5. '#ajax' => array(
  6. 'callback' => 'webform_client_form_ID_ajax_callback',
  7. 'wrapper' => str_replace('_','-',$form['#form_id']),
  8. 'effect' => 'fade',
  9. ),
  10. '#value' => t('Submit'),
  11. );
  12. }
  13. }

  1. function webform_client_form_ID_ajax_callback($form, &$form_state) {
  2. if(form_get_errors()){
  3. return $form;
  4. }
  5. }

Вы можете использовать код, чтобы сделать его общим для всех WebForms с включенной настройкой "Нет редиректа (перезагрузка текущей страницы)" ("No redirect (reload current page) ").

  1. function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  2. // do ajax submit generic for all the webform those have no redirect option enabled.
  3. if($form['#node']->webform['redirect_url'] == "<none>"){
  4. $matches = array();
  5. //check whether the form id have nid at the end like _nid
  6. preg_match('/[\d]+$/', $form_id, $matches);
  7. $nid_match = $matches[0];
  8. if(strpos($form_id, 'webform_client_form_') == 0 && !empty($nid_match)){
  9. $form['actions']['submit'] = array(
  10. '#type' => 'submit',
  11. '#ajax' => array(
  12. 'callback' => 'webform_client_form_ajax_callback',
  13. 'wrapper' => str_replace('_','-',$form['#form_id']),
  14. 'effect' => 'fade',
  15. ),
  16. '#value' => t('Submit'),
  17. );
  18. }
  19. }
  20. }

  1. function webform_client_form_ajax_callback($form, &$form_state) {
  2. if(form_get_errors()){
  3. return $form;
  4. }
  5. else{
  6. return $form['#node']->webform['confirmation'];
  7. }
  8. }

На этом все, теперь после отправки веб-формы пользователь увидит результат обработки формы без обновления страницы.

Похожие материалы

Комментарии

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

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