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 documented (it may just be me searching the wrong things!).

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

My Question

How do I access the different input values of this FormData object before I send it off? Eg. form.name accesses the value that was entered into the input with the name form.name.

Answer 1

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 2

First thing I don't think it's possible to build a FormData object from a form as you've specified, and to get values from the form use the method described in the accepted answer -- this is more of an addendum!

It looks like you can get some data out of a formdata object:

var formData = new FormData();
formData.append("email", "test1@test.com");
formData.append("email", "test2@test.com");
formData.get("email");

Unfortunately, this will only return the first item for that key, in this case it will return 'test1@test.com'

Please see also: MDN article on formdata get method

Hope this helps!

Also note that if you want to test this in chrome you'll have to enable the experimental web features flag:

Note: Chrome support for methods other than append is currently behind the "Enable Experimental Web Platform Features" flag.

MDN page; in the browser compatibility section

Answer 3

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 4

Just to add to the previous solution from @Jeff Daze - you can use the FormData.getAll("key name") function to retrieve all of the data from the object.

Answer 5

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 6

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 7

Another solution:
HTML:

<form>
<input name="searchtext"  type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>

JS:

$('.sb').click( function() {
    var myvar=document.querySelector('[name="searchtext"]').value;
    console.log("Variable value: " + myvar);
});