Iterating through FormData in IE

Question

I'm using FormData to send information back to the server. In some cases however I need to read out the data before I send it.

Chrome allows you to iterate through the collection but IE does not supply the same methods.

The code below works in Chrome:

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

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

JS Fiddle

Does anyone know how to achieve the same result in IE? Thanks.

Use `for...in...` instead of `for...of...` ([Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility)) — Andreas, Jun 21 '16 at 08:34
The issue is related to the methods on the FormData object, not the use of `for...of/in...`. IE is missing `formData.keys() / entries()` etc... — KoenW, Jun 21 '16 at 09:14
@SuperUberDuper it's a part of spec. https://xhr.spec.whatwg.org/#dom-formdata — , Dec 13 '17 at 01:25

acdcjunior · Accepted Answer · 2019-04-25T16:42:43.547

There's a FormData polyfill that works. For details, read their docs.

IE 10, IE 11 and Edge

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

JSBin demo for IE10 and above.

<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>

_{Code above picks up the latest versions. Versions tested: https://unpkg.com/weakmap-polyfill@2.0.0/weakmap-polyfill.min.js and https://unpkg.com/formdata-polyfill@3.0.9/formdata.min.js}

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.

JSBin demo here.

<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>

_{Code above picks up the latest version. Version tested: https://unpkg.com/formdata-polyfill@3.0.9/formdata.min.js}

Thank you. After days of looking for answers for IE's lack of character, this one worked for me perfectly. Nothing else did. — Saturn K, Mar 27 '20 at 16:28
It's 2021 and we are still having to use Polyfills to fix InternetExplorer 11 because it's still used by government and banks etc — ChristoKiwi, Sep 29 '21 at 00:25

Iterating through FormData in IE

1 Answers1

IE 10, IE 11 and Edge

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

Linked