Есть форма, которая всплывает с помощью Magnific Popup.
<!-- Форма -->
<div id="form-wrapper" class="form-wrapper">
<form id="form" class="form" name="form">
<input required type="text" class="form__input" name="name" placeholder="ИМЯ">
<input required type="email" class="form__input" name="email" placeholder="E-MAIL">
<input required type="text" class="form__input" name="phone" placeholder="ТЕЛЕФОН">
<button class="form__button">ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ</button>
</form>
</div>
// Форма в модальном окне
$('#popup-form').magnificPopup({
type: 'inline'
});
Код, который отвечает за Ajax и передачу полей в обработчик:
// Отправка заявки
$(document).ready(function() {
$('#form').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
if (document.form.name.value == '' || document.form.phone.value == '' || document.form.email.value == '' ) {
valid = false;
return valid;
}
$.ajax({
type: 'POST',
url: 'mail.php',
data: $(this).serialize()
}).done(function() {
$(this).find('input').val('');
$('#form').trigger('reset');
});
return false;
});
});
Как сделать, чтобы после успешного заполнения полей и отправки данных, форма скрывалась и появлялось другое окно ("спасибо за заявку")?