Урок 26. Создание AJAX формы отправки сообщений
Для создания AJAX формы нам понадобится:
- modSwiftMailer - дополнение MODX Revolution, которое можно установить из репозитория
- библиотека jQuery
Алгоритм работы:
- пользователь заполняет поля и нажимает "Отправить"
- форма обращается по адресу к ресурсу, где лежит сниппет sendMail
- этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender
Создание формы отправки сообщения
Напишем код формы с необходимыми полями (можно создать отдельный чанк, если собираетесь вызывать форму на нескольких страницах):
В моём случае эти поля:
- Имя
- Телефон
- Сообщение
Напротив полей, обязательных для заполнения, выставим атрибут required="required", чтобы форма не отправлялась, пока не будут заполнены данные поля.
Создание скрипта обработки формы
Создадим javascript, который будет обрабатывать форму и отправлять AJAX запрос для отправки сообщения на почту:
Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 - это ИД ресурса, где содержиться наш обработчик AJAX вызова.
Создание обработчика AJAX запроса
Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:
Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле "Содержимое" новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.
Полный код шаблона, который используется в демо, можно просмотреть по этой ссылке
Источники, которые помогли мне в создании урока и дополнительные материалы для изучения:
- Submit A Form Without Page Refresh using jQuery
- modSwiftMailer
- Урок 25. Создание AJAX поиска на сайте
- Урок 21. AJAX загрузка Quip комментариев
- Урок 9. Создание контакт-формы с помощью FormIt
Victor Polyakov
10.02.2013 04:45Где исходник java-скрипта?
Viktor Minator
10.02.2013 09:00Ошибся. Поправил.
Андрюха Жалнин
12.06.2014 19:45где мне прописать мой майл что бы на него приходило уведомление
Вячеслав Серков
11.02.2013 14:18Данные отправляются на сервер, ответ 200 приходит. Выводится сообщение, что отправка данных прошла. А вот в скрипте не могу получить сами данные. Массив $_POST пустой.
Не получает получить данные как в примере:
$id = filter_input(INPUT_POST, 'id' );
так и
$id = $_POST['id'];
Ещё ошибка с именем textarea#msg, в форме id="text"
Кто подскажет как получить данные ?
Viktor Minator
11.02.2013 14:29msg - спасибо, исправил.
Я в этом уроке, конечно же, не рассказывал как я всё это отлаживал (а там довольно-таки долгий процесс). Сделайте везде GET запросы и проверяйте работает ли сниппет отправки сообщения sendMail подставляя разное содержимое в УРЛ, типа site.name/opravka?id=1&msg=pismo&name=Viktor&tel=2232323
Вячеслав Серков
11.02.2013 14:42Я использую функцию от Безумкина sendMail();
( https://gist.github.com/bezumkin/3919318#file-import-php-L224 )
Функция отправляет без modSwiftMailer.
Ваш скрипт исполняется ровно до момента if (empty($id)) return;
В своём, я убрал весь код, кроме if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}
Вставил функцию, на холостом ходе работает ) Теперь бы данные получить, желательно в $_POST.
Буду пробовать, надеюсь получится.
Viktor Minator
11.02.2013 21:08Если вы передаёте параметр &id= в вашем POST запросе, то будет срабатывать всё нормально. Я это сделал, чтобы менеджер сайта знал на какой странице отправляли письмо...
Да, modPHPMailer тоже можно использовать.
Александр Наумов
22.02.2013 09:52Вы пишите, что "Данный метод отправки сообщения можно использовать с дополнением FormIt", я настроил форму по "Урок 9. Создание контакт-формы с помощью FormIt", сейчас пытаюсь разабраться, как их интегрировать.
Дайте наводку в каком напровлении нужно двигаться.
Alexandr Lupa
24.02.2013 17:41Данные формы лучше собрать методом джквери serialize()
В данном случае вместо dataString можно написать jQuery(this).serialize()
Яна Х
09.03.2013 23:09//инициализируем modSwiftMailer и отправляем сообщение на почту
$modx->getService('mail', 'mail.modSwiftMailer');
$modx->mail->address('to', $recepient, 'Recepient');
$modx->mail->address('sender', $email);
$modx->mail->address('from', $email, $name);
$modx->mail->subject($pagetitle);
Тут вот так нужно.
Sem Den
15.08.2013 17:25//получаем системную настройку emailsender для получателя сообщений
recepient оказался массивом
$recepient = $modx->getConfig('emailsender');
$recepient = $recepient['mail_smtp_user'];
Павел Шишкин
06.10.2013 10:33Следует заметить, что данный способ не будет работать, если не включен параметр friendly_URLs. Т.к. &id в dataString будет конфликтовать с id в адресе страницы, на которой отправляется ajax-запрос. Можно просто &id заменить на что-нибудь другое в ajax запросе.
Viktor Minator
06.10.2013 17:44спасибо, правильное замечание!
Андрей Иванов
11.01.2014 09:06Прошу извинить за мои "пять копеек".
Ресурс, на котором находится форма обратной связи, должен быть некэшируемым.
Владислав Ткаченко
16.01.2014 03:10Спасибо конечно, но он что-то вообще не работает.
Выложите исходники рабочего снипета плз
Viktor Matushevskyi
16.01.2014 09:24Он, это кто? На странице рабочие примеры, даже демо есть.
25.03.2014 15:42форма работает!
Сообщение о том, что что форма отправлена, выходит.
Однако письмо на эл.ящик адресата не приходит!
$modx->mail->address('to', 'мой@емайл.ru', 'Recepient');
$modx->mail->address('sender', 'мой@емайл.ru');
Где надо править чтобы заработало?
Александр
26.05.2014 08:49Как можно изменить всплывающие подсказки "Заполните это поле" ?
А лучше чтобы полностью самому написать их и выводить где хочу.
Михаил Чеков
14.06.2014 13:48Виктор, здравсвуйте!
Спасибо большое Вам за уроки, очень познавательные и объясняете хорошо!
Подскажите пожалуйста, эта форма должна работать сразу везде, включая локальный сервер, или требуются какие-то дополнительные настройки отправления?
Вначале я полностью скопировал исходники,
Ответ от ajax появлялся,что письмо отправлено, письма не приходили на почту указанную в emailsender,
Затем я убрал поле id ресурса и проверки с этим связанные, тоже ничего не приходит(