FormData.append("key", "value") is not working
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 :/
New in Chrome 50+ and Firefox 39+ (resp. 44+):
-
formdata.entries()
(combine withArray.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.
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.