@ilya_tsym

Как сделать окно «Спасибо за заявку» после отправки данных с формы с помощью Magnific Popup?

Есть форма, которая всплывает с помощью 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;
    });
});


Как сделать, чтобы после успешного заполнения полей и отправки данных, форма скрывалась и появлялось другое окно ("спасибо за заявку")?
  • Вопрос задан
  • 1976 просмотров
Решения вопроса 2
@litash
.done(function() {
$(this).find('input').val('');
$('#form').trigger('reset');
//сюда вставь блок с инфой вот так
$('.block').fadeIn().delay(2000).fadeOut();
});

блок сверстай, сделай ему стили, напиши туда текст, который нужен, а в css display: none; сделай блоку. delay(2000) покажет на 2сек блок и скроет его,
Ответ написан
Zatmil
@Zatmil
Fullstack-разработчик
Внутри метода .done() вызвать ещё одну форму с любой информацией.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы