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

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

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)

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

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

Related

Recent Posts