Вывод благодарности после отправки формы
Добрый день. У меня к Вам, профи, такой вопрос. Как сделать такую вещь? Расскажу в двух словах: у меня есть форма-заявка, она всплывашка, когда вызывается она, то идет валидация формы и отправка данных в случае успешного заполнения. Моя задача сделать, чтобы после отправки формы (после нажатия кнопки субмит) она какое-то время не закрывалась и появлялось сообщение на ней с благодарностью о заказе. Как это сделать?
Пока в субмите у меня так все:
$("#id_form").submit(function(event){ //Обрабатываем сабмит формы
var var1 = true; // переменная валидации
if ($('#name').val().length) // если длина имени больше 0
{
$('#name').css( "border-color","#34BDD6"); //css('border', '#34BDD6');
}
else // если пусто поле
{
var1 = false;
$('#name').css("border-color", '#FF0000');
}
if ($('#email').val().length > 5) // если почтовый больше нуля
{
$('#email').css('border-color', '#34BDD6');
}
else // если пустое поле
{
var1 = false;
$('#email').css('border-color', '#FF0000');
}
if (var1==false) // если отправить данные формы нельзя (пустые поля)
{
event.preventDefault();
return false;
}
else // если отправляем данные, пишем благодарность и таймер
{
$("#id_title_form").text = "Спасибо за заказ! В ближайшее время мы свяжемся с Вами!";
setTimeout(function(){alert('Привет'); return true;}, 1500);
}
});
Вот, собственно, что у меня не получается. Подскажите, как можно такую вещь реализовать?
По коду вызова/сокрытия окна все выглядит так:
$('a#go').click( function(event){ // ловим клик по ссылки с id="go"
event.preventDefault(); // выключаем стандартную роль элемента
$('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
function(){ // после выполнения предъидущей анимации
$('#modal_form')
.css('display', 'block') // убираем у модального окна display: none;
.animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
});
});
/* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
$('#modal_close, #overlay').click(function(){ // ловим клик по крестику или подложке
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
function(){ // после анимации
$(this).css('display', 'none'); // делаем ему display: none;
$('#overlay').fadeOut(400); // скрываем подложку
}
);
});
Источник: Stack Overflow на русском