0

ДД, подскажите как отравлять данные из формы с помощью 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));
});

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

6
  • как ты проверяешь пустоту объекта?
    – Grundy
    3 дек 2020 в 9:17
  • не проверяю, я честно говоря вообще не понял как с этим конструктором работать. 3 дек 2020 в 9:48
  • Я имел ввиду: почему ты думал что этот объект пустой?
    – Grundy
    3 дек 2020 в 9:52
  • в пост запросе formdata не имела вложенностей, а не подскажешь как его на express потом обработать, развернул лог запроса с клиента и не вижу там этих данных 3 дек 2020 в 9:56
  • например так: ru.stackoverflow.com/a/1065494/186999
    – Grundy
    3 дек 2020 в 10:28

1 ответ 1

0

Для добавления полей из тега 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.