Notify a specific element in [object FormData] (for testing)

Question

I am trying to understand what content is contained within [object FormData] , and in particular, inside a specific element whose name should be Name . I would like to warn him to check the correctness of the content, but it returns undefined :

  alert(fd['Name']); 

I am sure that I am loading the form data correctly, so I was wondering, not the problem is that I am accessing the data wrong ...

Only the PS fd alert returns [object FormData]

Answer 1

IvanZh informed me that this approach did not work for him, which prompted me to do some research on the HTML5 FormData . As it turned out, I was completely wrong about this (see the Old incorrect answer below). All data for FormData is in its own code. This means that the browser processes the data for the form fields and upload files in the language of its implementation.

Quoting MDN :

Note .... FormData objects are not building objects. If you want to format the data provided, use the previous pure-AJAX example. Note also that although there is some file of fields in this example, when you submit the form via the FormData API, you do not need to use the FileReader API either: the files are automatically uploaded and uploaded.

It is not possible to present this information in JavaScript, so my naive suggestion is simply to serialize it as JSON will not work (which leads me to wonder why this answer was accepted in the first place).

Depending on what you are trying to achieve (for example, if you are only trying to debug), it may just be possible to discard this information from the server side script that returns the appropriate JSON metadata. For example, in PHP, you can submit your FormData form to analyzeForm.php , which can easily access everything that you attached to FormData by requesting superglobal. The script will digest the contents of your form and return the relevant information in a simple JSON analysis. It is very inefficient, so it is probably not suitable for production environments, but it is something.

Old wrong answer:

You may try:

 alert(JSON.stringify(fd)); 

to view the textual representation of the fd structure.

You can also use console.log , but this is a non-standard function and is not guaranteed to be available in all browsers.

Answer 2

Spokey user put me on this technique using jsFiddle here , which was very convenient in “seeing” the values ​​in the formData object, the main logic are:

 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 can see the values.

Answer 3

You should:

 console.log(fd['Name']); 

And in most browsers, especially chrome, you open the developer tools (F12) and watch the console.

You will get a good expandable view of your object, and you can check it out.