FormData is empty in JS

Question

<form class="form">
  <div class="container">
    <label>URL</label>
    <input id="data-url" value="val" type="text" />
  </div>
</form>

const formData = new FormData(document.querySelector('.form'));
console.log([...formData])

It is simplified version of HTML, but basically label and input tags are descendants of form. I am trying to get value of input and name of the label using FormData API, but it is empty for some reason.

You should have a name property for each input

Lk77
– Lk77

2022-08-23 14:44:21 +00:00
Commented Aug 23, 2022 at 14:44 — Lk77
– Lk77, Commented Aug 23, 2022 at 14:44

Spectric · Accepted Answer · 2022-08-23 14:44:22Z

5

You need the give the input a name:

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(form);
  console.log([...formData])
})

<form class="form" id="form">
  <div class="container">
    <label>URL</label>
    <input id="data-url" value="val" type="text" name="data-url" />
  </div>
  <button>View form data</button>
</form>

answered Aug 23, 2022 at 14:44

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

FormData is empty in JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related