FormData.append("key", "value") is not working

Question

Can you tell me whats wrong with this:

var formdata = new FormData(); formdata.append("key", "value"); console.log(formdata); 

My output looks like this, I cant find my "key" - "value" pair

FormData *__proto__: FormData **append: function append() { [native code] } ***arguments: null ***caller: null ***length: 0 ***name: "append" ***prototype: append ***__proto__: function Empty() {} *constructor: function FormData() { [native code] } **arguments: null **caller: null **length: 0 **name: "FormData" **prototype: FormData **toString: function toString() { [native code] } *__proto__: Object **__proto__: Object **__defineGetter__: function __defineGetter__() { [native code] } **__defineSetter__: function __defineSetter__() { [native code] } **__lookupGetter__: function __lookupGetter__() { [native code] } **__lookupSetter__: function __lookupSetter__() { [native code] } **constructor: function Object() { [native code] } **hasOwnProperty: function hasOwnProperty() { [native code] } **isPrototypeOf: function isPrototypeOf() { [native code] } **propertyIsEnumerable: function propertyIsEnumerable() { [native code] } **toLocaleString: function toLocaleString() { [native code] } **toString: function toString() { [native code] } **valueOf: function valueOf() { [native code] } 

I can't understand! Yesterday it worked so well, and today my head crashed the keyboard so many times! Firefox, Chrome, both the same :/

Answer 1

New in Chrome 50+ and Firefox 39+ (resp. 44+):

• formdata.entries() (combine with Array.from() for debugability)
• formdata.get(key)
• and more very useful methods

Original answer:

What I usually do to 'debug' a FormData object, is just send it (anywhere!) and check the browser logs (eg. Chrome devtools' Network tab).

You don't need a/the same Ajax framework. You don't need any details. Just send it:

var xhr = new XMLHttpRequest; xhr.open('POST', '/', true); xhr.send(data); 

Easy.

Answer 2

You say it's not working. What are you expecting to happen?

There's no way of getting the data out of a FormData object; it's just intended for you to use to send data along with an XMLHttpRequest object (for the send method).

Update almost five years later: In some newer browsers, this is no longer true and you can now see the data provided to FormData in addition to just stuffing data into it. See the accepted answer for more info.