Почему этот код передаёт пустые данные c html-формы в обработчик?

Question

[AJIEKC_10]

document.addEventListener("DOMContentLoaded", () => {

    const ajaxSend = async (formData) => {
        const response = await fetch("signup.php", {
            method: "POST",
            body: formData
        });
        if (!response.ok) {
            throw new Error(`Ошибка по адресу ${url}, статус ошибки ${response.status}`);
        }
        return await response.text();
    };

    if (document.getElementById("ajax_form")) {
        const forms = document.getElementById("ajax_form");

        forms.forEach(form => {
            form.addEventListener("submit", function (e) {
                e.preventDefault();
                const formData = new FormData(this);

                ajaxSend(formData)
                    .then((response) => {
                        console.log(response);
                        form.reset();
                    })
                    .catch((err) => console.error(err))
            });
        });
    }

});

Comments

[Антон]

Насколько я помню, document.getElementById возвращает один элемент. А вы там потом через forEach пытаетесь перебрать. Если не выдаёт ошибку о том, что метода forEach нет, то скорее всего перебирает фиг знает что.
Проще или console.log() натыкать, чтобы понять, что у вас там происходит или банально дебагером пройтись. Добавьте вызов debugger; перед forms.forEach( и откройте инструменты разработчика. При сабмите формы у вас отладчик остановится на строчке с debugger - а дальше уже пошагово проверите, что и где у вас.

[AJIEKC_10]

Антон, да, заменил getElementById("ajax_form") на getElementsByTagName("form"). Далее обнаружил ошибку: ajax.js:19 Uncaught TypeError: forms.forEach is not a function at HTMLDocument.. Пытался исправить вот так:
'' [].forEach.call.forEach(forms, form => {.. '' – не вышло, та же самая ошибка.

[AJIEKC_10]

'' [].forEach.call.̶f̶o̶r̶E̶a̶c̶h̶(forms, form => {.. '' А, ну вот тут простая ошибка была, всё работает. Спасибо

Answer 1

[AJIEKC_10]

Заменил getElementById("ajax_form") на getElementsByTagName("form"). Далее обнаружил ошибку: ajax.js:19 Uncaught TypeError: forms.forEach is not a function at HTMLDocument.. Исправил вот так:
'' [].forEach.call(forms, form => {.. ''