Accessing FormData Values

Question

I have a FormData object which I create in javascript from an HTML form like so. The FormData object doesn\'t seem very well documente

Answer 1

FormData.get will do what you want in a small subset of browsers - look at the browser compatibility chart to see which ones (currently only Chrome 50+ and Firefox 39+). Given this form:

<form id="form">
  <input name="inputTypeName">
</form>

You can access the value of that input via

var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");

Answer 2

It seems you can't get values of the form element using FormData.

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".

However you can achieve it using simple Javascript like this

var formElements = document.forms['myform'].elements['inputTypeName'].value;

Answer 3

According to MDN:

An object implementing FormData can directly be used in a for...of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries())

Therefore you can access FormData values like that:

var formData = new FormData(myForm);

for (var p of formData) {
    let name = p[0];
    let value = p[1];

    console.log(name, value)
}

Answer 4

This is a solution to retrieve the key-value pairs from the FormData:

var data = new FormData( document.getElementById('form') );
data = data.entries();              
var obj = data.next();
var retrieved = {};             
while(undefined !== obj.value) {    
    retrieved[obj.value[0]] = obj.value[1];
    obj = data.next();
}
console.log('retrieved: ',retrieved);

Answer 5

If what you're trying to do is get the content of the FormData or append to it, this is what you should use:

Let's say you want to upload an image like so:

<input type="file" name="image data" onChange={e => 
uploadPic(e)} />

On change handler function:

const handleChange = e => {
    // Create a test FormData object since that's what is needed to save image in server

   let formData = new FormData();

    //adds data to the form object

    formData.append('imageName', new Date.now());
    formData.append('imageData', e.target.files[0]);

}

append: adds an entry to the creates formData object where imageData is the key and e.target.files[0] is the property

You can now send this imageData object which contains data of the image to your server for processing

but to confirm if this formData has values a simple console.log(formData)/won't do it, what you should do is this:

//don't forget to add this code to your on change handler 
function
for (var value of formData.values()) {
   console.log(value); 
}

//I hope that explains my answer, it works for vanilla JavaScript and React.js...thanks in advance for your upvote