FormData object returns empty even for a non-empty form

Question

FormData object is empty for a form with 2 input fields. formData.getAll() logs a error TypeError: Not enough arguments to FormData.getAll.. Here is my code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
      function test () {
        var element = document.getElementById("invite-form");
        console.log(element);
        var formdata = new FormData(element)
        console.log(formdata.getAll());
      }
    </script>

  </head>
  <body>

    <form id="invite-form" method='POST' action=''>
      <label for="email">Email...</label>
      <input type="text" name="email" value="[email protected]"/>
      <input type="hidden" name="csrf_token" value="random" />
      <button class="btn" onclick="test()">Button</button>
    </form>

  </body>
</html>

I tried to populate the FormData object with the values from the form on clicking the button

You know that the getAll() method has somewhat spotty browser support, and really only works in Chrome 50+ and Firefox 39+ — adeneo
– adeneo, Commented Apr 21, 2016 at 3:10
Yes I understand that but I am using the latest Firefox . I just want to know what I am doing wrong here — user6025378
– user6025378, Commented Apr 21, 2016 at 3:15
It works for me in Firefox, but as the documentation states, it requires a key, something like formdata.getAll('email') — adeneo
– adeneo, Commented Apr 21, 2016 at 3:18
@adeneo thank you for pointing out the mistake. I failed to pass the key as argument. — user6025378
– user6025378, Commented Apr 21, 2016 at 3:35
No problem, I didn't know one had to pass a key either, I assumed it returned the entire form, but apparently, it doesn't — adeneo
– adeneo, Commented Apr 21, 2016 at 3:37

adeneo · Accepted Answer · 2016-04-23 13:31:14Z

6

The getAll() method of the FormData interface requires a key to be given.
It then returns all the values associated with that key from within a FormData object.

function test () {
    var element = document.getElementById("invite-form");
    console.log(element);
    var formdata = new FormData(element)
    console.log(formdata.getAll('email')); // <- needs key
}

answered Apr 23, 2016 at 13:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

Yuniac Over a year ago

This naming scheme is so dumb, getAll but it gets a single field

Collectives™ on Stack Overflow

FormData object returns empty even for a non-empty form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related