При ПОВТОРНОМ заполнении формы страница перезагружается

Question

Одна форма встроена на страницу. С ней проблем нет. Хоть тысячу раз отправляй данные - все происходит без перезагрузки страницы. Вторая форма упакована в модальное окно. Если данные с нее отправить 1 раз - проблем нет. Если отправлять с нее же повторно - происходит перезагрузка страницы.

На заметку: Обе формы работают под одним слушателем.

Будто бы у формы в модальном окне слетает submit. Я пытался отловить ошибку через отладчик, но все уперлось в то, что я не понимаю, почему второй раз код не долетает до "submit" события. К слову, что первая форма, что вторая, в точности повторяют друг друга.

Код JS:

forms.forEach(form => { //на обе формы вешается один обработчик события
    postData(form);
}); 

function postData(form) {
    form.addEventListener("submit", e => { //при повторной отправке МОДАЛЬНОЙ формы сюда код уже не заходит
        e.preventDefault();

        const request = new XMLHttpRequest();
        request.open("POST", "server.php");
        request.setRequestHeader("Content-type", "application/json");

        const formData = new FormData(form),
              object   = {};
        
        formData.forEach((value, key) => {
            object[key] = value;
        });
        const json = JSON.stringify(object);
        request.send(json);

        request.addEventListener("load", () => {
            if (request.status === 200) {
                console.log("success");
                form.reset();
            } else {
                console.log("failure");
            }
        });
    });
}

DOM-структура:

<div class="order"><!-- первая форма, с которой проблем НЕТ(при повторном использовании все ок) -->
    <div class="container">
        <div class="title">Заказывай пробный день прямо сейчас!</div>
        <form action="#" class="order__form">
            <input required placeholder="Ваше имя" name="name" type="text" class="order__input">
            <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="order__input">
            <img src="icons/right.svg" alt="right">
            <button class="btn btn_dark btn_min">Перезвонить мне</button>
        </form>
    </div>
</div>


<div class="modal"><!-- форма в модальном окне. первый раз срабатывает БЕЗ перезагрузки страницы. При повторном использовании перезагружает страницу. Странные дела. -->
    <div class="modal__dialog">
        <div class="modal__content">
            <form action="#">
                <div data-modal-close class="modal__close">&times;</div>
                <div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
                <input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
                <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
                <button class="btn btn_dark btn_min">Перезвонить мне</button>
            </form>
        </div>
    </div>
</div>

Скрины из отладчика:

На прикрепленном скриншоте видна разница во входных данных в слушатель. первый скрин - первая отправка формы. второй - соответственно, повторная отправка ТОЙ ЖЕ формы, после отправки которой страница перезагружается. Кто сможет объяснить разницу? Что в первом, что во втором случае используется форма из модального окна. Повторюсь, с формой, которая изначально показана в DOM-структуре таких проблем нет.

БЛОГ НА HUSL

При ПОВТОРНОМ заполнении формы страница перезагружается

Ответы (0 шт):