FormData created from an existing form seems empty when I log it

Question

I'm trying to get a set of keys (<input> names or similar) and values (<input> values) from a web form:

<body>
  <form>
    <input type="text" name="banana" value="swag">
  </form>

  <script>
    var form = document.querySelector('form');
    var formData = new FormData(form);
  </script>
</body>

According to the FormData documentation, formData should contain the keys and values from the form. But console.log(formData) shows formData is empty.

How can I quickly get the data from the form using FormData?

JSFiddle

score 185 · Accepted Answer · edited Jul 10 '19 at 15:09

185

Update: the XHR spec now includes several more functions to inspect FormData objects.

FireFox has supported the newer functions since v39.0, Chrome is slated to get support in v50. Not sure about other browsers.

var form = document.querySelector('form');
var formData = new FormData(form);

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

//or

console.log(...formData)

edited Jul 10 '19 at 15:09

Alex Szücs

561
5
12

answered Apr 07 '16 at 23:22

Farray

8,290
3
33
37

Don't feel bad about answering an old question! I've changed this to the accepted answer (particularly with most browsers being evergreen) and added some example code. It's not `console.log(formData)` but at least we can finally see what's inside. – mikemaccana Apr 08 '16 at 08:54
13

Using Typescript (^3.3.3333), the formData.entries() does not seem to work. I had to do this instead: `formData.forEach(file => console.log("File: ", file));` – pablo-az Apr 07 '19 at 10:52
1

It works! Thank you – testing_22 Jan 08 '21 at 21:50
5

Ugh. I just spent the whole afternoon trying to figure out why my FormData was empty... and it really wasn't! – Auspex Jun 11 '21 at 15:23
16

FormData looks like an empty object in the Developer Console. Don't be fooled! If you run `console.log(...formData)` instead of `console.log(formData)` you should get some data displaying (as long as your input fields are all named). – Josh Powlison Jun 26 '21 at 13:44
4

@JoshPowlison is absolutely correct. That's the way to do this. The creators of `FormData` have annoyed one more person today. It should be easy to see rather than going through a `for` loop or using `console.log(...formData)`. – FearlessFuture Nov 12 '21 at 02:09
1

Son of @!##$. I could have been chasing a seemingly empty but not empty object for much longer. – Eloff Dec 10 '22 at 20:53

Linga · Answer 2 · 2020-12-29T07:14:20.313

19

I faced the same problem as well. I wasn't able to see on the console. You need to add the following to the ajax request, so the data will be sent

processData: false, contentType: false

edited Dec 29 '20 at 07:14

answered Mar 01 '16 at 07:08

Linga

10,379
10
52
104

score 15 · Answer 3 · edited May 23 '17 at 12:18

15

But console.log(formData) shows formData is empty.

What do you mean by "empty"? When I test this in Chrome it shows ‣ FormData {append: function} ... which is to say it's a FormData object, which is what we expected. I made a fiddle and expanded to code to this:

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

...and this is what I saw in the Chrome Developer Tools Network panel:

HTTP request

So the code is working as expected.

I think the disconnect here is that you're expecting FormData to work like a vanilla JavaScript object or array and let you directly look at and manipulate its contents. Unfortunately it doesn't work like that—FormData only has one method in its public API, which is append. Pretty much all you can do with it is create it, append values to it, and pass it to an XMLHttpRequest.

If you want to get the form values in a way you can inspect and manipulate, you'll have to do it the old-fashioned way: by iterating through the input elements and getting each value one-by-one—or by using a function written by someone else, e.g. jQuery's. Here's an SO thread with a few approaches to that: How can I get form data with JavaScript/jQuery?

edited May 23 '17 at 12:18

Community

1
1

answered Jul 30 '14 at 15:43

Jordan Running

102,619
17
182
182

> What do you mean by "empty"? I mean that formData has no enumerable keys. – mikemaccana Jul 30 '14 at 15:51
1

It's not supposed to have any enumerable keys. That's not part of its specification. That doesn't mean it's "empty"—as my example shows, the expected data is there—it just means it's not enumerable. – Jordan Running Jul 30 '14 at 16:00
Thanks - I get that the FormData is storing the form data, and also that it's `toString()` method (used by `console.log()`) is useless. I don't think that's be design though - it seems very inconsistent with rest of the web API. – mikemaccana Jul 30 '14 at 16:00
I think FormData was designed to do one very specific thing (the spec certainly [doesn't mention any additional functionality](http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata)), and its implementation does that thing only. It's entirely possible that future revisions of the spec will add methods that make it more useful for other things, but if you want an object with enumerable keys you'll unfortunately have to look elsewhere. – Jordan Running Jul 30 '14 at 16:03
Objects, Arrays, Numbers and HTMLElements were also designed to do one specific thing, and they also have usable valueOf()s. Thanks for your answer though. – mikemaccana Jul 30 '14 at 16:06
Objects and arrays were designed to have enumerable keys. HTMLElement doesn't define `valueOf`, and so falls back on `Object.prototype.valueOf`, whose behavior in this case is [implementation-defined](http://www.ecma-international.org/ecma-262/5.1/#sec-15.2.4.4). In most browsers that means `someHTMLElement.valueOf()` just returns `someHTMLElement`. It's debatable how "usable" that is. Anyway, it seems like you ought to [join WHATWG](http://www.whatwg.org/mailing-list) and let them know what you think about their FormData specification; I certainly can't do anything to address your complaints. – Jordan Running Jul 30 '14 at 16:22
3

Yes, I haven't expected, and don't expect you do be able to fix the standard, sorry if you feel like I have. I was just merely commenting on the lack of utility of the implementation. Almost everything in the 'web API' produces usable results when logged, this stands out because it doesn't. It's fairly clear the present situation is quite poor, whether that's on the browser makers or WHATWG to fix is probably best discussed elsewhere. Thanks for your answer. – mikemaccana Jul 30 '14 at 16:44

score 6 · Answer 4 · edited Jul 21 '20 at 14:49

6

As per MDN documentation on FormData

An object implementing FormData can directly be used in a for...of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).

Iterating over FormData.entries() didn't worked for me.

Here is what I do to check if formData is empty or not:

var isFormDataEmpty= true;
for (var p of formData) {
   isFormDataEmpty= false;
   break;
}

As iterating over formData gives you the uploaded file, you can use it for getting the file name, file type validation, etc.

edited Jul 21 '20 at 14:49

thatguy

21,059
6
30
40

answered Jul 12 '16 at 07:49

Sudarshan_SMD

2,549
33
23

`for (var x of formData) console.log(x);` does what the OP asked – Auspex Jun 11 '21 at 15:27
@Auspex correct. I went off-topic by mentioning what I had used to check if the form data is empty or not. – Sudarshan_SMD Jun 15 '21 at 14:20
Not really a criticism; I really appreciated the complete explanation. But you might add in that one liner just to actually answer the question :-) – Auspex Jun 16 '21 at 08:39

FormData created from an existing form seems empty when I log it

4 Answers4

Linked

Related