Как отображать сообщение об успешной отправки формы в конкретный попап, который открыт в данный момент?

Question

[svm2001]

Суть такая. На странице 5 кнопок. Каждая кнопка - ссылка на открытие конкретного модального окна. Они все разные. В каждом модальном окне - форма (+кнопка отправить). Я смог сделать так, чтобы когда письмо приходит на почтовый ящик, пользователь понимал, с какого попапа и с какой формы приходит письмо. Также после отправки формы в модальном окне чуть ниже формы должно появляться сообщение об успешной отправке. И вот тут проблема. Модальные окна находятся после футера на странице и сообщение об успешной отправке у меня появляется в самом первом модальном окне (хотя я отправляю формы из 3 или 4 по счету модального окна). Подскажите как написать цикл, который будет выбирать конкретно открытый попап и показывать сообщение об успешно отправленном сообщении там где мне нужно.

Вот сам попап. Один из пяти.

<div class="modal order__modal">
    <div class="modal__container">
        <div class="modal__header"></div>
        <button class="modal__close" aria-label="Закрыть модальное окно">&times;</button>
        <form class="modal__form form">
            <span class="modal__text">Оставить заявку</span>
            <input
                type="tel"
                class="form__input"
                name="user-phone"
                placeholder="Телефон"
                minlength="2"
                maxlength="30"
                required
                data-phone>
                <input type="hidden" id="order" name="order" value="Пользователь оставил заявку">
            <input
                type="text"
                class="form__input"
                name="user-name"
                placeholder="Имя"
                minlength="2"
                maxlength="30"
                required>
                <input type="hidden" id="order" name="order" value="Пользователь оставил заявку">
            <button class="button button--reverse form__submit" type="submit">Отправить</button>
        </form>
        <div class="spinner-wrapper spinner-wrapper_inactive">
            <div class="spinner"></div>
        </div>
        <div class="form__message form__message_success">Сообщение успешно отправлено!</div>
        <div class="form__message form__message_error">Ошибка! Попробуйте повторить позже</div>
    </div>
</div>

Вот код отправки попапа и соответсвенно показа сообщений после отправки:

function submitForm({
    formSelector,
    spinnerSelector,
    url
}) {
    const form = document.querySelector(formSelector);
    const btnSubmit = form.querySelector('.form__submit')
    const inputs = form.querySelectorAll('.form__input');
    const spinner = document.querySelector(spinnerSelector);
    const spinnerActiveClass = 'spinner-wrapper_active';
    const spinnerInactiveClass = 'spinner-wrapper_inactive';
    const messageSuccess = document.querySelector('.form__message_success');
    const messageError = document.querySelector('.form__message_error');
    const messageActiveClass = 'form__message_active';

    function clearInputs() {
        inputs.forEach(input => input.value = '');
    };

    async function postData(url, data) {
        const response = await fetch(url, {
            method: "POST",
            body: data
        });
        const result = await response.json();
        if (!result.status) {
            throw new Error();
        }
        return result;
    };


    form.addEventListener('submit', function(e) {
        e.preventDefault();
        spinner.classList.remove(spinnerInactiveClass);
        spinner.classList.add(spinnerActiveClass);

        const formData = new FormData(form);

        postData(url, formData)
            .then(() => {
                messageSuccess.classList.add(messageActiveClass);
            })
            .catch(() => {
                messageError.classList.add(messageActiveClass);
            })
            .finally(() => {
                spinner.classList.add(spinnerInactiveClass);
                spinner.classList.remove(spinnerActiveClass);

                clearInputs();
            });
    });
}

export default submitForm;

Так я вызываю попап (по дата атрибуту), но это не суть думаю.

toggleModal({
        modalSelector: '.order__modal',
        modalActiveClass: 'modal_active',
        modalBtnSelector: '[data-order]'
    });

Answer 1

[AUser0]

Раздайте всем формам уникальные id, при submit передавайте так же id формы, при обработке ответа учитывайте пришедший id формы, и показывайте ответ в соответствующей форме по id.

Comments

[AUser0]

Я сейчас пишу на ощупь по памяти, поэтому наверное неправильно. Но, кажется, можно добавить

const formData = new FormData(form);
formData['id'] = form.id;