Как в post запросе fetch отправить объект FormData

Question

ДД, подскажите как отравлять данные из формы с помощью formdata?пересмотрел пару тройку статей и ничего не получилось отправить, постоянно этот объект пустой, пример

 <form action="" id="reg">
   <input type="text" placeholder="Username" id="ssername" />
   <input type="number" placeholder="Age" id="age" />
   <label for="status">Status</label>
   <input type="checkbox" id="status" />
   <button type="submit" id="btn">sumbit</button>
 </form>


const my_form = document.getElementById("reg");
my_form.addEventListener("submit", function (e) {
    e.preventDefault();
    const data = new FormData(this);
    fetch("http://localhost:3000/create", {
        method: "POST",
        mode: "cors",
        body: data,
    })
   .then((res) => res.text())
   .then((data) => console.log(data));
});

Хочется понять как это работает, помогите пож-та если как правильно это сделать.

Answer 1

Для добавления полей из тега form в FormData у поля должно быть установлен атрибут name

В примере в вопросе установлен атрибут id, а атрибут name отсутствует.

Для решения нужно либо заменить id на name, либо просто добавить name с нужным значением.

const my_forms = document.querySelectorAll("form");
my_forms.forEach(my_form => my_form.addEventListener("submit", function(e) {
  e.preventDefault();
  const data = new FormData(this);
  console.log([...data.entries()]);
}));

<form action="">
  <input type="text" placeholder="Username" id="ssername" />
  <input type="number" placeholder="Age" id="age" />
  <label for="status">Status</label>
  <input type="checkbox" id="status" />
  <button type="submit" id="btn">sumbit</button>
</form>

<form action="">
  <input type="text" placeholder="Username" name="ssername" />
  <input type="number" placeholder="Age" name="age" />
  <label for="status">Status</label>
  <input type="checkbox" name="status" />
  <button type="submit" id="btn">sumbit</button>
</form>

БЛОГ НА HUSL

Как в post запросе fetch отправить объект FormData

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