Блог Робина

Как убрать после отправки форму Ajax Formit

07.04.2018
642 просмотра

Возникла необходимость сделать форму обратной связи на Modx через связку Ajax + Formit, с валидацией полей, так чтобы после отправки форма обратной связи исчезла, а на её месте появилось сообщение об успешной отправке.

Готового решения не нашел, погуглив скомпилировал рабочее, на базе Bootsrap 4.

Для вывода формы используем пакеты Formit и AjaxForm. На месте вывода формы вставляем код вызова:

 [!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm.example` &hooks=`email` &emailTpl=`tpl.Email` &emailSubject=`` &emailTo=`` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено.` &validate=`name:required:minLength=^3^, email:email:required, message:required:stripTags`]

После вызова Ajax вставляем код скрипта:

 <script> $(document).on('af_complete', function(event, response) { var form = response.form; if (response.success) { response.form.hide(); $('#success-response').removeClass('d-none'); } }); </script>

Сообщение в случае успешной отправки:

 <div id="success-response" class="alert alert-info d-none"> <p>Спасибо за обращение, сообщение отправлено.</p> </div>

Пояснения:

Класс d-none, используется в Bootstrap-4 для скрытия DIV. Скрипт срабатывает на событие AjaxForm, проверяет ответ, и в случае успеха убирает форму вызова, и так же убирает у блока (div) с ID="success-response" класс d-none, оставляя остальные бутстраповские классы — alert alert-info.

Вместо ID="success-response" можно использовать своё имя, главное чтобы в скрипте и в div id они совпадали.

Чанк tpl.AjaxForm.example автоматически создаётся при установке пакета AjaxForm и содержит все необходимые поля. Можно на его основе сделать свой чанк и указать его в поле &form

Сообщение об успешной отправке с id="success-response" надо добавить в конце содержимого чанка tpl.AjaxForm.example

Сообщения из полей &validationErrorMessage и &successMessage будут появляться в модальном окне, не зависимо от сообщения с id="success-response".

Чанк tpl.Email надо создать самостоятельно. Базовое содержимое:

 <p>Имя: </p> <p>Email: </p> <p>Сообщение: </p>

В поле &emailTo вписать адрес email на который отправлять, в поле &emailSubject — тему письма.

Оставьте комментарий