Как закрыть модальное окно после отправки AjaxForm
Как закрыть модальное окно после отправки AjaxForm?
Сделал окно poli-dent.net/implantation.html внизу страницы запись на прием.
Письма уходят, но окно висит пока его руками не закроешь. Можно сделать так чтобы оно само закрывалось после удачной отправки письма?
Сделал окно poli-dent.net/implantation.html внизу страницы запись на прием.
Письма уходят, но окно висит пока его руками не закроешь. Можно сделать так чтобы оно само закрывалось после удачной отправки письма?
Комментарии: 36
ты используешь дефолтный чанк формы?
<form action="" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Ваше имя *</label>
<input type="text" value="[[+fi.name]]" maxlength="100" class="form-control" name="name" id="af_name" placeholder="" >
<span class="error_name">[[+fi.error.name]]</span>
</div>
<div class="col-md-6">
<label>Телефон:*</label>
<input type="text" value="[[+fi.phone]]" maxlength="100" class="form-control" name="phone" id="af_phone" placeholder="" >
<span class="error_phone">[[+fi.error.phone]]</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Email</label>
<input type="text" value="[[+fi.email]]" maxlength="100" class="form-control" name="email" id="af_email" placeholder="" >
</div>
<div class="col-md-6">
<label>Клиника у метро :*</label>
<select name="clinic" id="af_clinic" class="form-control" >
<option value="1" selected>Славянский бульвар</option>
<option value="2">ВДНХ</option>
</select>
</div>
</div>
</div>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
`]]
<div class="row" style="margin-top:10px;">
<div class="col-md-12">
<input type="submit" value="Записаться" class="btn btn-primary btn-lg" data-loading-text="Грузим...">
</div>
</div>
</form>
попробуй в кнопку добавить onclick=«closeWindow()
<input type="submit" value="Записаться" class="btn btn-primary btn-lg" data-loading-text="Грузим..." onclick="closeWindow()>
Так она будет закрываться сразу же после нажатия на кнопку. А если поля не заполнены? Надо ведь, чтоб после успешной проверки полей она закрывалась.
да, я только допер что чушь предложил.
В файле default.js вызывается триггер в случае success видимо где то там вешать надо
это да, просто интересно, должен же быть попроще вариант
$(document).on('af_complete', function(event,res) {
if(res.success) // paste your code here...
});
Поясните пожалуйста, что куда и зачем.
modx.pro/components/3342-ajaxform-version-1-0-2-pl/
Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:
в вашем случае это будет выглядеть так
Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:
$(document).on('af_complete', function(event, response) {
console.log(event, response);
});
в вашем случае это будет выглядеть так
$(document).on('af_complete', function(event,res) {
if(res.success) $('#popup_order').foundation('reveal', 'close');
});
Не получилось(
Добавил перед вызовом
[[!AjaxForm?
Добавил перед вызовом
[[!AjaxForm?
Попробуй так
$(document).on('af_complete', function(event,res) {
if(res.success) $('#popup_order').trigger('reveal:close');
});
П.С. Это для Семена. Плохо прицелился. )
Спасибо, большое за помощь.
Что то только не работает. не пойму что не так. poli-dent.net/implantation.html
Что то только не работает. не пойму что не так. poli-dent.net/implantation.html
Что за скрипт используется для открытия модального окна?
$(document).on('af_complete', function(event,res) {
if(res.success) $('.close-reveal-modal').click();
});
вы я надеюсь это в <script пихаете? (или .js)
Да конечно в скрипт пихаю))
Спасибо, все получилось! Ваш скрипт сработал!
Спасибо, все получилось! Ваш скрипт сработал!
Всем огромное спасибо за помощь!
Всем привет!
Что-то я не догоняю, прошу посодействовать.
Значит, нужно мне чтобы после корректного заполнения формы модальное окно закрывалось — пишу следующую форму и скрип:
Заранее большое спасибо!
Что-то я не догоняю, прошу посодействовать.
Значит, нужно мне чтобы после корректного заполнения формы модальное окно закрывалось — пишу следующую форму и скрип:
<form class="form" action="[[~[[*id]]]]" method="post" name="f1">
<input type="hidden" name="nospam:blank" value="" />
<div class="form-group">
<label for="name">ИМЯ</label>
<span class="error_name">[[!+fi.error.name]]</span>
<input type="text" class="form-control" name="name" id="name" placeholder="Ваше имя" value="[[!+fi.name]]" />
</div>
<div class="form-group">
<label for="tel">ТЕЛЕФОН</label>
<span class="error_tel">[[!+fi.error.tel]]</span>
<input type="text" class="form-control" name="tel" id="tel" placeholder="Контактный номер телефона" value="[[!+fi.tel]]" />
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
<script>
$(document).on('af_complete', function(event, response) {
var form = response.form;
if (form.attr('id') == 'callBack') {
form.hide();
}
else {
console.log(response)
}
});
</script>
Форма отправляется, но модальное окно остается на месте — как быть?Заранее большое спасибо!
Не знаю, что возвращается в response и есть ли там form, но из кода видно, что у вас в условии прописано, что если id формы равно callBack, то закрывать форму. У вашей формы нет такого атрибута с таким именем.
Вообще модальное окно с формой у меня вот так вызывается:
Я попробовал добавить id непосредственно в форму вот так:
Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.
<div class="modal fade" id="callBack" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
<h3 class="modal-title" id="myModalLabel">Перезвоните мне!</h3>
</div>
<div class="modal-body">
[[!AjaxForm?
&snippet=`FormIt`
&hooks=`spam,email`
&form=`tplBackCallForm`
&validate=`name:required:minLength=^2^,tel:required`
&validationErrorMessage=`Пожалуйста, заполните все поля!`
&emailTo=`alt_anest@mail.ru`
&emailSubject=`Запрос обратного звонка с сайта ktpro.ru`
&emailTpl=`tplBackCallEmail`
&successMessage=`Мы свяжемся с Вами в самое ближайшее время!`
]]
</div>
</div>
</div>
</div>
Я попробовал добавить id непосредственно в форму вот так:
<form class="form" action="[[~[[*id]]]]" method="post" id="cbf" name="f1">
<input type="hidden" name="nospam:blank" value="" />
<div class="form-group">
<label for="name">ИМЯ</label>
<span class="error_name">[[!+fi.error.name]]</span>
<input type="text" class="form-control" name="name" id="name" placeholder="Ваше имя" value="[[!+fi.name]]" />
</div>
<div class="form-group">
<label for="tel">ТЕЛЕФОН</label>
<span class="error_tel">[[!+fi.error.tel]]</span>
<input type="text" class="form-control" name="tel" id="tel" placeholder="Контактный номер телефона" value="[[!+fi.tel]]" />
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
<script>
$(document).on('af_complete', function(event, response) {
var form = response.form;
if (form.attr('id') == 'cbf') {
form.hide();
}
else {
console.log(response)
}
});
</script>
Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.
Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.
Как раз закрывается именно форма. А нужно закрывать окно.
$(document).on('af_complete', function(event, response) {
if (response.success) {
// 1. Просто закрыть
$('#callBack').hide();
// 2. Или с анимацией
$('#callBack').fadeOut();
}
});
Сработало, спасибо!
НО! теперь форма исчезает, но остается затемнение экрана, которое возникает при вызове формы:)
Использую стандартный bootstrap — может кто подскажет, как и от него еще избавиться?:)
Заранее спасибо!
НО! теперь форма исчезает, но остается затемнение экрана, которое возникает при вызове формы:)
Использую стандартный bootstrap — может кто подскажет, как и от него еще избавиться?:)
Заранее спасибо!
Если используется bootstrap, то можно использовать его javascript
$('#callBack').modal('hide');
Сергей, спасибо большое!!!
Все работает, как нужно!
Все работает, как нужно!
Сергей, а не подскажите, как в этом случае включить анимацию (плавное закрытие окна)?
Коллеги, чанк вызова модальной формы имеет вид:
<div class="popups__container" style='display:none'>
<div class='popup-callback popup-call' data-popup-style='callback'>
<div class="project-popup__close arcticmodal-close"><img src="assets/templates/eco/images/project-popup__close.png" alt=""></div>
<div class='popup-callback-intro'>
<h2 class='popup-callback__head'>Заказать звонок</h2>
<div class='popup-callback-brd'></div>
<p class='popup-callback-prg'>
Чтобы узнать подробнее о строительстве Вашего дома, оставьте заявку или позвоните нам по телефону
</p>
<p class='popup-callback-phone tracking-phone-field'>+7 (800) 350-05-50</p>
</div>
[[!AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.popup`
&hooks=`email,FormItSaveForm`
&formName=`Перезвоните мне ЕКОСТРОЙ`
&formFields=`name,tel`
&fieldNames=`name==Имя,tel==Телефон`
&emailSubject=`Необходимо перезвонить`
&emailTo=`pankov-anton@yandex.ru`
&validate=`name:required,tel:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено!`
]]
<script>
$(document).on('af_complete', function(event, response) {
if (response.success) {
$('.popup-call').hide();
}
});
</script>
</div>
<div class='popup-callback popup-thanks'>
<div class='popup-callback-intro'>
<h2 class='popup-callback__head'>Спасибо за обращение!</h2>
<p class='popup-callback-prg'>
Мы свяжемся с Вами в ближайшее время!
</p>
</div>
</div>
</div>
Для закрытия использую <script>
$(document).on('af_complete', function(event, response) {
if (response.success) {
$('.popup-call').hide();
}
});
</script>
сазу же после вызова AjaxForm. Что я делаю не так?
Интересный вопрос. Может быть слишком близко к монитору сидишь?
я наверное обращаюсь с полной серьезностью
Наверно.
А мы глядя на код должны угадать, что в нем не так?
Понятное описание проблемы — уже половина успеха.
А мы глядя на код должны угадать, что в нем не так?
Понятное описание проблемы — уже половина успеха.
Тема ветки — закрытие модального окна после успешной отправки формы автоматически. Выше я привел код чанка модального окна и прописал
<script>
$(document).on('af_complete', function(event, response) {
if (response.success) {
$('.popup-call').hide();
}
});
</script>
С данным скриптом закрытия не происходит. Вот я и пытаюсь найти истину. Может быть кто-то и подскажет.
Вижу что сообщение 2015 года. Но так как искал решение и нашел с трудом и то не до конца.
Этот код
Странно то что сайт на bootstrap а этот вариант не сработал
Этот код
$(document).on('af_complete', function(event, response) {
if (response.success) {
$('#exit').fadeOut();
}
});
заработал когда поставил его за всеми js на сайте. Долго не мог решить почему не работает наверно конфликт был.Странно то что сайт на bootstrap а этот вариант не сработал
$('#exit').modal('hide');
С первым решением тоже не все гладко если закрывать всю форму остается подложка, установил так class="modal-body" id="exit"
закрывается форма но остается шапка но ее хоть можно закрыть.
Может кому пригодится, в UiKit 3 закрыть окно можно таким образом
$(document).on('af_complete', function(event, response) {
if (response.success) {
UIkit.modal('#идентификатор модального окна ').hide();
}
});
Всем привет. Подскажите, как обойти?
На странице есть две формы, в каждой форме есть два блока, по логике, после отправки формы один блок срывается, а другой блок открывается.
Но т.к. на странице две формы срабатывает код у первой по коду на самой странице
На странице есть две формы, в каждой форме есть два блока, по логике, после отправки формы один блок срывается, а другой блок открывается.
Но т.к. на странице две формы срабатывает код у первой по коду на самой странице
[[!AjaxForm?
&snippet=`FormIt`
&emailTpl=`tplMail`
&hooks=`email`
&validate=`phone:required, fastname:blank`
&frontend_css=``
&emailSubject=`Обратная связь с сайта [[++site_name]]`
&emailFromName=`[[++site_name]]`
&emailTo=`{1 | resource: 'tplMail'}`
&emailFrom=`[[++emailsender]]`
&validationErrorMessage=`Пожалуйста, исправьте ошибки!`
&successMessage=`Ваше сообщение успешно отправлено`
&form=`@CODE:
<form action="[[~[[*id]]]]" method="post" id="callbackform" class="ajax_form">
<div id="form-fields">
<input type="text" id="fr_name" name="name" value="[[+fi.name]]">
<input type="text" id="fr_phone" name="phone" class="m-phones" value="[[+fi.phone]]" required="">
<input type="submit" class="btn" data-default="Заказать звонок" value="Заказать звонок">
</div>
<div id="form-thanks" style="display: none;">
<span class="title">Спасибо за ваше обращение!</span>
<p>Мы свяжемся с Вами в ближайшее время.</p>
</div>
</form>
`
]]
// в второй формы
<form action="[[~[[*id]]]]" method="post" id="consultationform" class="ajax_form">
// сам JS, пытался разбить на ID формы, но не срабатывает
<script>
$(document).ready(function() {
AjaxForm.Message.success = function() {};
});
$(document).on('af_complete', function(event, response) {
var form = response.form;
if (form.attr('id') == 'callbackform') {
$("#form-fields").fadeOut();
$("#form-thanks").fadeIn();
e.preventDefault();
}
if (form.attr('id') == 'consultationform') {
$("#form-fields").fadeOut();
$("#form-thanks").fadeIn();
e.preventDefault();
}
});
</script>
База верстки. На одно странице не должно быть 2 или более элемента с одинаковым id.
У вас получается #form-fields и #form-thanks 2е штуки т.к. две формы. Надо перейти на классы и работать с конкретной формой, а не глобально.
js вроде так, с jquery давно не работал
У вас получается #form-fields и #form-thanks 2е штуки т.к. две формы. Надо перейти на классы и работать с конкретной формой, а не глобально.
<form action="[[~[[*id]]]]" method="post" id="callbackform" class="ajax_form">
<div class="form-fields">
<input type="text" id="fr_name" name="name" value="[[+fi.name]]">
<input type="text" id="fr_phone" name="phone" class="m-phones" value="[[+fi.phone]]" required="">
<input type="submit" class="btn" data-default="Заказать звонок" value="Заказать звонок">
</div>
<div class="form-thanks" style="display: none;">
<span class="title">Спасибо за ваше обращение!</span>
<p>Мы свяжемся с Вами в ближайшее время.</p>
</div>
</form>
js вроде так, с jquery давно не работал
if (form.attr('id') == 'callbackform') {
$(form).find(".form-fields").fadeOut();
$(form).find(".form-thanks").fadeIn();
}
ID у форм разные, а вот у блоков да. Разрулил их разными классами, тоже вариант. Просто я на другое смотрел. Спасибо
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.