Как сделать закрытие после отправки в форме заказа звонка?

Question

[mUchenik]

Всем привет!
Подскажите, уважаемые знатоки, как мне сделать автоматическое закрытие, после отправки формы?
Теперь подробнее:
На этой странице есть кнопка вызова pop-up (форма обратной связи).
После отправки, окно просто обводится зеленой полосой, но не закрывается.
Реализовал сие так:
Contact Form 7 + Easy Modal
Скажите, как можно (и что нужно сделать (в идеале пошагово)) для того, что бы окно само закрывалось, а вместо него появлялось сообщение "Ваша заявка принята" и тоже исчезала.

Answer 1

[Сергей Третьяков]

Автоматическое закрытие привязывается к ajax событию success или complete (успешное выполнение запроса) по setTimeout можно закрыть модальное окно.

$('#твоя-форма').submit(function() {
	$.ajax({
		type   : 'POST',
		url: $ajax_url,
		data : {
			name: $name_value ,
			email: $email_value,
			message: $message_value,
			subject: $subject_value,
			task: 'sendmail'
		},
		beforeSend: function(data){
			$('#submit').before('<div class="loading"></div>');
		},
		success: function (data){
			$('.loading').fadeOut(function(){
				$(this).remove();
			}); //прячется gif-ка какая-нибудь
			setTimeout(function(){
			document.forms['твоя-форма'].reset(); // очищается форма методом .reset()
			$('#myModal').modal('hide'); 
			}, 3000); // здесь закрывается модальное окно через 3 секунды
		},
		complete:function(data){
		 $form.each(function(){
			this.reset();  // или так очищается форма методом .reset()
		});
		},
	});
	return false;
});

Comments

[mUchenik]

Сергей, спасибо вам!!! Но прошу прощения, за быть может глупый вопрос: Не могли бы вы подсказать мне, куда прописывать сей код?

[Сергей Третьяков]

Именно этот код не нужно никуда прописывать, т.к. он для ознакомления со структурой ajax запроса и его основными событиями. У вас сайт на wordpress + woocommerce. Я не знаком с wordpress, но скачав Contact Form 7 и порывшись в нём нашел участок кода c ajax-запросом. Файл на сервере: там где лежат плагины/contact-form-7/includes/js/scripts.js (делаем копию файла перед изменением)
на 157 строке находим условие

if (1 == data.mailSent) {
			$form.resetForm();
		}

и добавляем

if (1 == data.mailSent) {
			$form.resetForm();
			$form.find('.emodal-close').click();
		}

[mUchenik]

Спасибо, Сергей! Огромное!
Но пока не срабатывает сей код...
Видимо потому. что окно с формой, у меня вызывается с помощью плагина Easy Modal... И быть может, в нем надо прописывать код.
Но вам огромное спасибо!!!

[Сергей Третьяков]

Незачто. Можно попробовать ещё варианты. Тот же файл, строка 159 в условии

if (1 == data.mailSent) {
      $form.resetForm();
    }

дописываем

if (1 == data.mailSent) {
      $form.resetForm().emodal('close'); // Вариант 1. Пробуем так закрыть
      $('.emodal-close').click(); // Вариант 2 или так закрыть
      $('#eModal-1').emodal('close'); // Вариант 3 или так закрыть
    }

Answer 2

[Александр Ружевич]

попробуйте повесить функцию на нажатие клавиши "Отправить"

<input type="button" onclick="название_функции()" value="Отправить"/>

которая будет эмулировать нажатие на крестик-закрытие модального окна