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

Answer 1

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.

Answer 2

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)

Answer 3

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:

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?

Answer 4

I also faced the same problem. 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