Закрытие pop-up после отправки формы заказа звонка

[maxg5]

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

$('#твоя-форма').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;
});

Пытаюсь применить к своему сайту, но скрипт не работает - окно не закрывается.

jQuery('.wpcf7-form sent').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('');
},    success: function (data){
      $('.loading').fadeOut(function(){
        $(this).remove();
      }); //прячется gif-ка какая-нибудь
      setTimeout(function(){
      document.forms['.wpcf7-form sent'].reset(); // очищается форма методом .reset()
      $('#').modal('hide'); 
      }, 2000); // здесь закрывается модальное окно через 2 секунды
    },
    complete:function(data){
     $form.each(function(){
      this.reset();  // или так очищается форма методом .reset()
    });
    },
  });
  return false;
});

[ksa]

Пытаюсь применить к своему сайту, но скрипт не работает

Так потестируй его по шагам...

[Nexus]

Сделал это при помощи Contact Form 7 + Easy Modal.

Тут ты пишешь про Easy Modal, а в коде вызываешь Bootstrap'овский (если не ошибаюсь) метод «modal» с аргументом 'hide'.
Смотри документацию к своей библиотеке и применяй её методы.

PS. Про селектор забыл написать: он вообще бомба. Я не знаю, что бедный jQ должен вернуть, когда ему в кач-ве селектора единственную решетку передают.

[maxg5]

Скорее всего я где то селектор не тот передаю.
Easy Modal это не библиотека, а плагин для WordPress.
Пробовал за место решетки передавать в качестве селектора .eModal-1
Все равно не работает.

[Nexus]

Easy Modal это не библиотека, а плагин для WordPress.

И поэтому он обязан поддерживать любые методы?

Тут ты пишешь про Easy Modal, а в коде вызываешь Bootstrap'овский (если не ошибаюсь) метод «modal» с аргументом 'hide'.

Смотри документацию к своему плагину и применяй его методы.


Ну или так:

$('.eModal-1').hide();

[maxg5]

Nexus,

$('.eModal-1').hide();

Так к сожалению не работает.

Смотри документацию к своему плагину и применяй его методы.

Я этот скрипт нашел на стороннем форуме. Там у человека тоже был Easy Modal+Contact Form 7. У него все работало. Получается с методами все в порядке. А ошибка в том что я не правильно применяю скрипт к своему случаю.
Не понятно какие селекторы нужно передавать в строках 1, 13, 19, 20

[Nexus]

Так к сожалению не работает.

Значит ошибка может быть в следующем:
1. Запрос вовсе не отправляется к серверу;
2. Запрос фейлится;
3. В этой строке ошибка: document.forms['.wpcf7-form sent'].reset();
4. Элемента с классом «.eModal-1» нет на странице.

Я бы пункт 3 сначала смотрел, там вообще хрень какая-то написана.
https://learn.javascript.ru/form-elements

И если используешь jQ, то почему не использовать его всегда?

$('.wpcf7-form.sent').get(0).reset();

PS. в консоли браузера много интересных вещей пишется, она открывается по нажатию на клавишу F12, вкладка «Console».

[maxg5]

Nexus,

Элемента с классом «.eModal-1» нет на странице.

Вроде бы есть элемент с классом .eModal-1 - 266 строка.

<p><a href="#" class="eModal-1"><img  class="but" src="/wp-content/themes/clinico/img/but.png" /></a></p>

Это получается класс для вызова модального окна.

$('.wpcf7-form.sent').get(0).reset();

Здесь нужно использовать селектор .wpcf7-form.sent или #4018? это не совсем понятно. #4018 - так именуется нужная форма в шорт коде для WordPress. А .wpcf7-form.sent есть в коде страницы.
Переписал код используя везде jQ.

<script>
jQuery('#4018').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){
      jQuery('#submit').before('');
},    success: function (data){
      jQuery('.loading').fadeOut(function(){
        jQuery(this).remove();
      }); //прячется gif-ка какая-нибудь
      setTimeout(function(){
      jQuery('#4018').get(0).reset(); // очищается форма методом .reset()
      jQuery('.eModal-1').hide();
      }, 2000); // здесь закрывается модальное окно через 3 секунды
    },
    complete:function(data){
     $form.each(function(){
      this.reset();  // или так очищается форма методом .reset()
    });
    },
  });
  return false;
});
</script>

В консоль смотрел. Касательно данного скрипта ошибок нету.

[Nexus]

maxg5, перепиши свой код так, отправь форму и смотри, что в консоль пишется.

function _log(){
	console.log.apply(console,arguments);
}

_log($('#4018').size()?'Form found':'Form not found');
jQuery('#4018').submit(function() {
	_log('Form. Submit');
    
	$.ajax({
        type: 'POST',
        url: $ajax_url,
        data: {
            name: $name_value,
            email: $email_value,
            message: $message_value,
            subject: $subject_value,
            task: 'sendmail'
        },
        beforeSend: function(data) {
            _log('Ajax. BeforeSend');
			jQuery('#submit').before('');
        },
        success: function(data) {
			_log('Ajax. Success');
			
            jQuery('.loading').fadeOut(function() {
                jQuery(this).remove();
            }); //прячется gif-ка какая-нибудь
			
            setTimeout(function() {
				_log('Ajax. Success timeout');
				_log('Modal object',$('.eModal-1'));
				
                jQuery('#4018').get(0).reset(); // очищается форма методом .reset()
                jQuery('.eModal-1').hide();
            }, 2000); // здесь закрывается модальное окно через 3 секунды
        },
        complete: function(data) {
			_log('Ajax. Complete');
			
            $form.each(function() {
                this.reset(); // или так очищается форма методом .reset()
            });
        },
    });
	
    return false;
});

Здесь нужно использовать селектор .wpcf7-form.sent или #4018? это не совсем понятно. #4018 - так именуется нужная форма в шорт коде для WordPress. А .wpcf7-form.sent есть в коде страницы.

$('#4018');//Поиск элемента с id="4018"
$('.wpcf7-form.sent');//Поиск элемента с class*="wpcf7-form sent"

Если на странице нет элемента с id 4018, то нужно использовать поиск по классу.

[maxg5]

Nexus,

перепиши свой код так, отправь форму и смотри, что в консоль пишется.

Сделал как вы сказали. В консоли пишется Form not found на 417 строку кода. Получается элемент, т.е. форма с id 4018 не найдена.
Я заменил id 4018 на .wpcf7-form.sent - в консоле так же пишется Form not found.
Получается не правильный селектор для поиска форма задан? Какой тогда селектор задавать?