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.
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:
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
var unindexed_array = form.serializeArray(); $.map(unindexed_array, function(n, i){ console.log(n['name']+ ', '+ n['value']); });
This code give same result in IE
