Как через wpcf7mailsent добавить класс к одному попапу, а не всем, в которых данная форма?

Ссылка скопирована
CSS
1 ответ

Если одна и та же форма вызывается в попапах на странице несколько раз, то как обратиться к родителю конкретной форме, т.к. this не работает?
Так не работает:

document.addEventListener( 'wpcf7submit', function( event ) { 	if ( '123' == event.detail.contactFormId ) { 		$(this).parents('.modal-body').addClass('thanks-this'); 	} }, false );

document.addEventListener( 'wpcf7submit', function( event ) { if ( '123' == event.detail.contactFormId ) { $(this).parents('.modal-body').addClass('thanks-this'); } }, false );

Так работает:

document.addEventListener( 'wpcf7submit', function( event ) { 	if ( '123' == event.detail.contactFormId ) { 		$('.modal-body').addClass('thanks-this'); 	} }, false );

document.addEventListener( 'wpcf7submit', function( event ) { if ( '123' == event.detail.contactFormId ) { $('.modal-body').addClass('thanks-this'); } }, false );

Но так, естественно, новый класс прикрепляется ко всем попапам.

Дополнительно:

Как через wpcf7mailsent добавить класс к одному попапу, а не всем, в которых данная форма?

Если одна и та же форма вызывается в попапах на странице несколько раз, то как обратиться к родителю конкретной форме, т.к. this не работает?

У анонимных функций в js нет своего this, соответственно берется this из скоупа выше.

Но так, естественно, новый класс прикрепляется ко всем попапам.

Можно попробовать искать ближайшего родителя с css классом modal-body (т.е. настоящей формы, где сработало событие wpcf7submit):

document.addEventListener('wpcf7submit', (e) => {     if ('123' === e.detail.contactFormId) {         const form = e.target;         const modalBody = form.closest('.modal-body');          if(modalBody) {             modalBody.classList.add('thanks-this');         }         else {             console.log('Творится какая то дичь!');         }     } });

document.addEventListener('wpcf7submit', (e) => { if ('123' === e.detail.contactFormId) { const form = e.target; const modalBody = form.closest('.modal-body'); if(modalBody) { modalBody.classList.add('thanks-this'); } else { console.log('Творится какая то дичь!'); } } });

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Виктор Sys Ответ

В обработчике Contact Form 7 нужно брать не this, а конкретную форму, на которой сработало событие. У события CF7 есть цель события: event.target. Это и есть DOM-элемент формы, которая отправилась. От него уже можно подняться к ближайшему попапу.

В Вашем примере $('.modal-body') выбирает все элементы на странице, поэтому класс добавляется всем попапам. Нужно искать ближайший родительский контейнер только относительно текущей формы:

document.addEventListener('wpcf7mailsent', function (event) {
    if (String(event.detail.contactFormId) !== '123') {
        return;
    }
 
    const form = event.target;
    const modalBody = form.closest('.modal-body');
 
    if (modalBody) {
        modalBody.classList.add('thanks-this');
    }
}, false);

document.addEventListener('wpcf7mailsent', function (event) { if (String(event.detail.contactFormId) !== '123') { return; } const form = event.target; const modalBody = form.closest('.modal-body'); if (modalBody) { modalBody.classList.add('thanks-this'); } }, false);

Если попап устроен иначе, замените .modal-body на общий класс именно Вашего окна: .modal, .popup, .fancybox__content или другой контейнер. Суть та же: поиск должен идти через closest() от текущей формы.

Если нужен jQuery-вариант:

document.addEventListener('wpcf7mailsent', function (event) {
    if (String(event.detail.contactFormId) !== '123') {
        return;
    }
 
    jQuery(event.target)
        .closest('.modal-body')
        .addClass('thanks-this');
}, false);

document.addEventListener('wpcf7mailsent', function (event) { if (String(event.detail.contactFormId) !== '123') { return; } jQuery(event.target) .closest('.modal-body') .addClass('thanks-this'); }, false);

Важно использовать событие wpcf7mailsent, если класс нужно добавлять только после успешной отправки письма. wpcf7submit срабатывает после любой попытки отправки, в том числе при ошибке валидации.

Итог: проблема не в Contact Form 7, а в области поиска элемента. Берите event.target, ищите ближайший родительский попап через closest() и добавляйте класс только ему.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ