I'm trying to see what content is contained inside an [object FormData], and in particular inside a specific element whose name should be Name. I would like to alert it, to check if the content is correct, but doing so returns undefined:
alert(fd['Name']);
I'm pretty sure I'm loading the form data correctly, so I was wondering if the problem is that I'm accessing the data in the wrong way...
PS alerting only fd returns [object FormData]
IvanZh informed me that this approach did not work for him, which prompted me to do some research into the HTML5 FormData object. As it turns out, I was totally wrong about this (see old incorrect answer below). All of the data for FormData resides in native code. That means the browser handles the data for the form fields and file uploads in the language of its implementation.
Quoting MDN:
Note: ... FormData objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
There is no way to represent this information in JavaScript, so my naive suggestion to simply serialize it as JSON will not work (which prompts me to wonder why this answer was accepted in the first place).
Depending on what you are trying to achieve (eg. if you're only trying to debug), it might be feasible to simply bounce this information off a server side script that returns relevant JSON metadata. In PHP, for example, you could send your FormData to analyzeForm.php, which can easily access everything that you attached to FormData under the relevant request superglobal. The script would digest the contents of your form and return relevant information in easy to parse JSON. This is very inefficient, so it is probably not suitable for production environments, but it's something.
Old incorrect answer:
You could try using:
alert(JSON.stringify(fd));
to view a textual representation of the structure of fd.
You could also use console.log, but this is a non-standard feature and is not guaranteed to be present in all browsers.
User Spokey put me on to this technique using jsFiddle here which has been very handy in being able to "see" the values in a formData object, the basic logic being:
function submitFormFunction() {
//create formData object
var myFormData = new FormData();
// get the values from some input fields
var myKey1 = $("input[name='my_field_one']").val();
var myKey2 = $("input[name='my_field_two']").val();
// append the values to the formData object, whilst also defining their key names
myFormData.append("my_field_one",myKey1);
myFormData.append("my_field_two",myKey2);
// mock implementation - in order to view what is being sent
var xhr = new XMLHttpRequest;
xhr.open('POST', '/echo/html/', true);
xhr.send(myFormData);
}
Just keep the 'Net' tab open in Firebug and you will be able to see the values.
You should do:
console.log(fd['Name']);
And in most browsers, especially chrome you open Developer tools (F12) and see the console.
You'll get a nice expandable view of your object and you can inspect it.
