Question

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]

Answer 1

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.