Как добавить класс только к определенному попапу, а не ко всем попапам, содержащим данную форму, при помощи wpcf7mailsent?

Как обратиться к родительскому элементу конкретной формы, если одна и та же форма вызывается несколько раз в попапах на странице, при использовании document.addEventListener и this не работает? Код, который я использую, не приводит к ожидаемому результату.
  • 14 февраля 2024 г. 9:28
Ответы на вопрос 2
Для добавления класса только к определенному попапу, содержащему данную форму, можно использовать следующий подход:

1. Установите уникальный идентификатор, например "popup-id", для каждого попапа, который содержит форму.

2. При обработке события `wpcf7mailsent` получите родительский элемент конкретной формы с помощью метода`closest()` и добавьте класс только к этому элементу.

Вот примерный код, который может помочь вам решить эту задачу:

```javascript
document.addEventListener('wpcf7mailsent', function(event) {
    var form = event.detail.apiSettings.data.formId; // ID отправленной формы
    var popup = document.querySelector('#popup-id'); // Замените на ваш селектор попапа

    // Проверяем, что форма была отправлена внутри нужного попапа
    if (popup && popup.contains(event.target.closest('.wpcf7'))) {
        popup.classList.add('your-class'); // Добавляем класс к попапу
    }
});
```

Обратите внимание, что код содержит комментарии с объяснением каждой строки, и вы можете адаптировать его под вашу конкретную ситуацию, заменив `"popup-id"` на соответствующий селектор попапа и `"your-class"` на имя класса, который вы хотите добавить.
Если одна и та же форма вызывается в попапах на странице несколько раз, то как обратиться к родителю конкретной форме, т.к. this не работает?

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

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