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

javascript form-data
mikemaccana picture mikemaccana · Jul 30, 2014 · Viewed 85.9k times · Source

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

Answer

Farray picture Farray · Apr 8, 2016

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)

Related questions

How to inspect FormData?

I've tried console.log and looping through it using for in. Here it the MDN Reference on FormData. Both attempts are in this fiddle. var fd = new FormData(), key; // poulate with dummy data fd.append("key1", "alskdjflasj"); fd.append("key2", "…

Read More
appending array to FormData and send via AJAX

I'm using ajax to submit a multipart form with array, text fields and files. I append each VAR to the main data as so var attachments = document.getElementById('files'); var data= new FormData(); for (i=0; i< attachments.files.length; …

Read More
Convert JS Object to form data

How can I can convert my JS Object to FormData? The reason why I want to do this is, I have an object that I constructed out of the ~100 form field values. var item = { description: 'Some Item', price : '0.00', …

Read More