How to display the FormData object values in Javascript

Using the FormData object is a very good way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.

FormData can send data to a server any kind of data including file fields too.

I had a situation where I need to inspect my FormData object. I used Firefox Developer Console Panel and tried to echo the FormData value using console.log(), but console.log was reluctant to give me the info in the Console panel.

In Console Panel, it logged an empty object. MDN documentation suggests that to get entries in FormData, FormData.entries() iterator should be used.

Here is how you can log all key/value pairs to the console using the entries property.

var formData = new FormData();
formData.append('key_1', 'First value');
formData.append('key_2', 'Second value');
formData.append('key_3', 'Third value');

// Log the key/value pairs
for (var pair of formData.entries()) {
    console.log( pair[0] + ' - ' + pair[1] );
}

This logs the following to the console:

key_1 - First value
key_2 - Second value
key_3 - Third value

FormData.entries() returns array of the form data key/value pairs. Each row in the array contains one key/value pair. So, the item key is in the index 0 and the item value is in the index 1.

Logging the values is just one example of what you can do with the key/value pairs.

If you need to inspect the values of a FormData object for some other purpose, it is obviously easy to do using the entries property.

It is also useful to note that you can grab an existing form’s data using:

var formData = new FormData(formElement)

If you are using JQuery, you can therefore use the following to grab the FormData:

var formData = new FormData($('#formElementID')[0]).

Then append data as needed.

For Internet Explorer 10, 11, and Edge support

To make it work with IE 10 and above, you’ll just have to add a WeakMap polyfill as well.

<script src="https://unpkg.com/weakmap-polyfill/weakmap-polyfill.min.js"></script>
<script src="https://unpkg.com/formdata-polyfill"></script>

<form action="" id="f">
    <input type="text" name="i1" value="v1">
    <input type="text" name="i2" value="v2">
</form>

<script type="text/javascript">
    console.clear();

    // Create a test FormData object
    var formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');

    // Display the key/value pairs
    var formDataEntries = formData.entries(), formDataEntry = formDataEntries.next(), pair;
    while (!formDataEntry.done) {
        pair = formDataEntry.value;
        console.log(pair[0] + ', ' + pair[1]);
        formDataEntry = formDataEntries.next();
    }

    // or, if you are really into compact code
    var es, e, pair;
    for (es = formData.entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // testing getting from form
    var myForm = document.getElementById('f');
    for (es = new FormData(myForm).entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }
</script>

IE11 and Edge, only (if you don’t have to support IE10):

If you only need IE 11 and above, you can remove the WeakMap’s polyfill and just keep FormData’s.

<script src="https://unpkg.com/formdata-polyfill"></script>

<form action="" id="f">
    <input type="text" name="i1" value="v1">
    <input type="text" name="i2" value="v2">
</form>

<script type="text/javascript">
    console.clear();

    // Create a test FormData object
    var formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');

    // Display the key/value pairs
    var formDataEntries = formData.entries(), formDataEntry = formDataEntries.next(), pair;
    while (!formDataEntry.done) {
        pair = formDataEntry.value;
        console.log(pair[0] + ', ' + pair[1]);
        formDataEntry = formDataEntries.next();
    }

    // or, if you are really into compact code
    var es, e, pair;
    for (es = formData.entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // testing getting from form element
    const myForm = document.getElementById('f');
    for (es = new FormData(myForm).entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }
</script>

Note: The code for working with FormData in Internet Explorer, is taken from StackOverflow.