УрокДобавляем к форме автосабмит с помощью Chaos Tools

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

Довольно удобные инструменты по добавлению автосабмита имеются в модуле Chaos Tools. С ним вам понадобится проделать всего три простых шага для получения результата.

Шаг первый

Добавляем js из ctools'a, который непосредственно выполняет сабмит формы при изменении нужного элемента:

ctools_add_js('auto-submit');

Шаг второй

Теперь надо определиться, при нажатии на какой элемент формы будет срабатывать автосабмит. Для этого, к элементу с формы добавляем вот такой аттрибут FAPI:

'#attributes' => array('class' => array('ctools-auto-submit')),

Пример для селекта:

$form['some_select'] = array(
  '#type' => 'select', 
  '#title' => t('Select example'),
  '#options' => array(
    0 => t('First option'),
    1 => t('Second option'),
  ),
  '#attributes' => array('class' => array('ctools-auto-submit')),
);

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

'#attributes' => array('class' => array('ctools-auto-submit-full-form')),

Соответственно, код формы будет выглядеть как-то так:

$form['#attributes']['class'][] = 'ctools-auto-submit-full-form';

Шаг третий

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

'#attributes' => array('class' => array('ctools-auto-submit-click')),

Если кнопка обработана ajax'ом, то добавляется ещё один класс:

'#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')),

В итоге кнопка получается такой:

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('Submit'),
  '#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')),
);

Всё, автосабмит прицеплен.

Послесловие

Если вы разрабатываете модуль, то не забудьте добавить к нему зависимость от Chaos Tools:

name = Module name
description = Module description
core = 7.x
 
dependencies[] = ctools

На данный момент автоматический сабмит поддерживается для следующих элементов: select, radio, checkbox и textfield. В дальнейшем планируется добавить поддержку элементов из HTML5.

Комментарии

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

Ммм, а чем такой способ предпочтительней своих перехватчиков событий с помощью js и jquery? По-моему с ctools менее гибко и меньше возможностей.

22.06.2012 17:47
Аватар пользователя Spleshka
Spleshka написал:

@emzzy,
1. Чем предпочтительнее? Время разработки. Я на автосабмит трачу ~20 секунд. Зачем писать свой велосипед, когда решение уже есть?
2. С ctools менее гибко? А какой вы ещё функционал хотите для автосабмита?

23.06.2012 01:39
Аватар пользователя emzzy
emzzy написал:

@SplasH
такой "велосипед" пишется не дольше автосабмита с ctools. Вы сами писали "На данный момент автоматический сабмит поддерживается для следующих элементов: select, radio, checkbox и textfield." - вот этим менее гибко. Труднее поддерживать код - если часть его реализовывается на стороне сервера, а часть на клиентской. Я вижу смысл использовать ctools для вещей, которые действительно сложно и долго реализовывать(например мультистеп формы или модальное окно), но не для такого.

23.06.2012 16:04
Аватар пользователя Гость
Гость написал:

"select, radio, checkbox и textfield." - вот этим менее гибко. "

Этих элементов хватает в 90% случаев.

23.06.2012 21:00
Аватар пользователя Spleshka
Spleshka написал:

@emzzy, ты пишешь и интегрируешь js решения за 20 секунд? Напиши мне в лс, сработаемся ;)

Теперь по поводу элементов. Как только мне будет их не хватать - я напишу патч и отправлю на d.org.

23.06.2012 22:08
Аватар пользователя emzzy
emzzy написал:

Конкретно это решение, не за 20 секунд, но за 5 минут точно - ибо оно элементарно. Про патчи, да, как-то забылся наш спор на drupal.ru, и то, что вы поклонник патчей ;)

23.06.2012 22:32
Аватар пользователя Spleshka
Spleshka написал:

Поклонник- это слабо сказано. Я считаю, что из них состоит мир ;)

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

> js решения за 20 секунд

$('.autosubmit').change(function(){
$(this).closest('form').submit();
});

10 секунд =)

27.06.2012 02:24
Аватар пользователя Spleshka
Spleshka написал:

А обернуть в бехейвиоры?
А оформить в отдельный файл?
А подключить этот файл?
А как же поддержка AJAX форм?
А как же работа с несколькими кнопками?
А как же сабмит на изменении только нужного элемента?
А как же навесить на элемент класс autosubmit?

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

> А обернуть в бехейвиоры?

+2 секунды

> А оформить в отдельный файл?

+2 секунды

> А подключить этот файл?

+2 секунды

> А как же поддержка AJAX форм?

она есть

> А как же работа с несколькими кнопками?

она есть

> А как же сабмит на изменении только нужного элемента?

она есть

> А как же навесить на элемент класс autosubmit?

так же как и в случае с ctools

29.06.2012 18:52
Аватар пользователя Spleshka
Spleshka написал:

Напиши скринкаст на 16 секунд, как ты это делаешь. И тогда я его вставлю в статью как альтернативу инструменту CTools со ссылкой на блог гуру =)

29.06.2012 23:36
Аватар пользователя Артур
Артур написал:

"Сплешка" ты зануда!

22.07.2014 16:37
Аватар пользователя bigferumdron
bigferumdron написал:

А как быть, если у меня форма аналог hierarhical select , т.е. селект листы формируются динамически через аякс. и очень надо сделать автосабмит.

В моем случае, если делаю как у Вас, сперва выскакивает окошко ошибки от Аякса.. а потом идет автосабмит.. Это не есть хорошо.

Нужно добавить какую-то задержку чтоли.. Подскажите пожалуйста

02.12.2012 18:14
Аватар пользователя Spleshka
Spleshka написал:

Не очень понятно - какая ошибка показывается при работе а ajax? Если совсем не получается с Ctools, то вы можете навесить на изменение элемента срабатывание кнопки вручную:

$('select').change(function(e) {
  $(this).parents('form').find('.form-submit').mousedown();
});

Как-то так. Но мне кажется в вашем случае вряд ли проблема в ctools.

02.12.2012 18:20
Аватар пользователя bigferumdron
bigferumdron написал:

За основу у меня взят код http://xandeadx.ru/blog/drupal/446 .

Текст ошибки: HTTP запрос AJAX завершен неправильно. Следует отладочная информация. Путь system/ajax . Статус текстом. Ответ текстом. ReadyState:4 . Вот скрин http://clip2net.com/s/2z1VK

Т.е. ситуация такая: форма работает так, что при изменении первого селект листа, аяксом формируется следующий, потом при изменении второго, формируется третий . Т.е. опять же повторюсь аналог hierarhical select . ТАк вот не могу понять, как тут правильно довесить автосабмит. Нужно чтобы сабмитилось при любом изменении любого элемента. КОгда так делаю, получается, что что аякс еще отрабатывает, а уже просиходит сабмит формы. И следовательно ошибка.. Ту же ошибку можно увидеть если раньше времени нажать на кнопку САБМИТ.
Может есть какой-то выход..

03.12.2012 13:32
Аватар пользователя Spleshka
Spleshka написал:

Погодите. Drupal AJAX сам навешивает событие $.change() для каждого элемента, обработанного через ajax. То есть вам достаточно навесить на элемент в коде элемент #ajax, и при его изменении форма автоматически будет сабмититься.

03.12.2012 17:41
Аватар пользователя master
master написал:

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

18.10.2013 14:22
Аватар пользователя Dany
Dany написал:

Доброго времени суток.
Есть небольшая проблема с автосабмитом. Только поймите правильно - я только постигаю азы. Так вот, я пытаюсь на описанную вами мультистеп форму навесть описанный тут вами автосабмит.
Что получается: подключаю ctools, добавляю атрибуты селекту и кнопке NEXT:

 if ($step < 3) {
    $form['actions']['next'] = array(
      '#type' => 'submit',
      '#value' => 'Следующий шаг',
      // На кнопку вешаем ajax-обработчик, который будет возвращать форму
      // в ранее созданный <div id="multistep_form-form-wrapper"></div>
      '#ajax' => array(
        'wrapper' => 'multistep_form-form-wrapper',
        'callback' => 'multistep_form_ajax_callback',
      ),
      '#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')),
    );
  }

то автосабмит не работает. Но если я на кнопке комментирую AJAX:

//      '#ajax' => array(
//        'wrapper' => 'multistep_form-form-wrapper',
//        'callback' => 'multistep_form_ajax_callback',
//      ),

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

19.12.2013 18:48
Аватар пользователя 2311
2311 написал:

Такая же проблема. Кто-нибудь сталкивался с таким?

01.04.2015 18:33

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