Search code examples
javascriptform-data

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

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

Solution

  • 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)