Рубрики
Без рубрики

Форма на Ajax — с вложением

Как сделать такую форму на CMF Modx..? В базовом варианте нам понадобятся:

сниппет ddSendFeedback;
и сниппет ddGetChunk;

также надо будет скачать и подключить jQuery (можно последний 1.10) и плагин ajaxForm;

Далее по-порядку создадим:

1) Чанк шаблон для получателя почты

<!DOCTYPE html>
<html lang="ru">
<body>
<div style="color:#3c3c3c;">
<h2>Контактные данные</h2>
        <span style="color:#007cc3;">Имя:</span> [+name+]
        <span style="color:#007cc3;">Email:</span> [+email+]
<h2>Сообщение</h2>
[+message+]
</div>
</body>
</html>

2) Новый документ-контейнер «AJAX» (это для удобства)

3) Дочерний документ «Обратная связь», выставляем у него:

  • шаблон — «(blank)» (т.к. нам не нужен никакой HTML);
  • тип содержимого — «application/json».

* Пусть id вновь созданного документа будет «100»

В содержимом документа «Обратная связь» разместим некэшируемый вызов сниппета ddSendFeedback:

[!ddSendFeedback?
        &email=`[email protected]`
        &tpl=`mail_feedback`
        &fromField=`email`
        &filesFields=`screenshort`
!]

* В параметре «filesFields» необходимо указать имя элемента формы, содержащего файл (в данном случае это

<input type="file" name="screenshort" />

, если такого нет, опустите этот параметр.

** Отдельного внимания заслуживает параметр «fromField», он нужен нам для того, чтобы письма нам приходили от ящика, который указал пользователь (это удобно).

4) Создаём чанк «feedbackForm» со следующим содержимым:

<form id="myForm" action="[~100~]" method="post" enctype="multipart/form-data">
        Имя: <input type="text" name="name" required />
        Email: <input type="email" name="email" required />
        Скриншот: <input type="file" name="screenshort" />
        Сообщение: <textarea name="message" required></textarea>
        <input type="submit" value="Отправить" />
</form>

5) Создаём опубликованный документ «script.js» (можно в корне, можно также где-то дочерним документом, не принципиально), выставляем у него:

  • шаблон — «(blank)»;
  • тип содержимого — «text/javascript».

* Пусть id этого документа будет «101».

6) Пишем необходимый js и вставляем в содержимое документа «script.js»

jQuery( document ).ready(function( $ ) {        
        //Применяем плагин $.form к нашей форме и назначаем функцию после отправки
        $('#myForm').ajaxForm(function(reply){
                //У объекта reply будет следующая структура: {status: true, title: '', message: ''}
                alert('Спасибо!' + reply.title + '
' + reply.message); //это для отладки
        });
  });

тут есть два подварианта — добавить вызов чанка в нашем JavaScript

// к элементу <body> (естественно, добавить можно к любому)
        $('body').append('[[ddGetChunk? &name=`feedbackForm`]]');

либо просто вызвать на отдельной странице {{feedbackForm}} решайте сами для себя ))

** Плагин $.form сам отправит AJAX-запрос, когда пользователь нажмёт на submit, нам нужно только обработать ответ.

7) Подключаем необходимые скрипты к странице в теге

<script type="text/javascript" src="/wp-content/uploads/"></script>
<script type="text/javascript" src="/wp-content/uploads/"></script>
<script type="text/javascript" src="/wp-content/uploads/"></script>

P.S. идея взята на Modx_im

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *