Как закрыть модальное окно после отправки 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 у форм разные, а вот у блоков да. Разрулил их разными классами, тоже вариант. Просто я на другое смотрел. Спасибо            
                    
                            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.