Browser - FormData (Web API)


FormData is a web api object that represent the data of a form.

You can create/build it and use it:

It provides a 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.


The formData is populated by following this procedure: constructing-the-form-data-set


Build from the form

<form id="form1" onsubmit="handleSubmit(); return false;">
<input name="user" type="text" value="Nico" />
<input name="age" type="number" value="10" />
<input name="button" type="submit" value="Let mee see the input data !" />

The FormData constructor takes a form element as parameter. See FormData constructor Specification

handleSubmit = () => {
  // build the formData object
  let formData =  new FormData(document.getElementById('form1'));
  // retrieve the entries in a entries variable of iterator type
  let entries = formData.entries();
  // loop over the iterator
  let result =;
  while (!result.done) {
    console.log("Input: Name: "+result.value[0]+", value: "+result.value[1]);
    result =;
  • Result:




let formData = new FormData();
formData.append('username', 'Nico');
formData.append('age', '10');


From a form, only successful form controls are included, i.e. those:

  • with a name,
  • not disabled
  • checked for radio buttons and checkboxes)
  • or selected one or more options within a select.
let formData =  new FormData(document.getElementById('form1'));


The entries of a formData return an iterator.


let formData = new FormData();
formData.append('username', 'Nico');
formData.append('age', '10');
// The entries function returns an iterator
let it = formData.entries();
  • The loop (iteration)
let result =;
while (!result.done) {
 result =;


The formdata event is fired when:

  • a form is constructing the entry list of the form data after the submit event. You could then add data in the list.
  • a new FormData() constructor is created.


<form id="form1" onFormData="handleFormData(event);" onSubmit="handleSubmit(event);">
<p><label>FirstName</label> <input name="firstname" type="text" value="FirstNameDefault"/></p>
<p><input name="button" type="submit" value="Let mee see the formDataEvent !" /></p>
  • The FormData cannot cancel the action of a submit. Therefore, we take over the submit event, prevent it and build ourself the formdata.
let handleSubmit = (event) => {
    console.log('submit event was fired');
    // prevent navigation
    // build the form data to fire the FormDataEvent on the form
    new FormData(;
let handleFormData = (formDataEvent) => {
    console.log('formdata event was fired');
    // Get the form data from the event object via values
    let formData = formDataEvent.formData;
    for (var entry of formData ) {
        console.log(entry[0]+" : "+entry[1]);

    // Get the form data from the event object via get
    console.log("Input is present ? : "+formData.has("firstname"));
    console.log("Value via the name attribute is: "+formData.get("firstname"));
    // You can also
    // delete(name) 
    // getAll(name) (for multiple)
    // set(name, value) and set(name, blobValue, filename)
    // submit further the data via XHR
    // let request = new XMLHttpRequest();
    //"POST", "/formHandler");
    // request.send(data);

Documentation / Reference

Powered by ComboStrap