If I have an existing form, I know I can effectively "convert" it to FormData by passing the form to the FormData constructor like in this example:

var myForm = document.getElementById('myForm');

var myFormData = new FormData(myForm);
//Now myFormData contains all fields from myForm

Is there any way to effectively do the inverse of this operation? I have an existing FormData object, and I want to apply its fields to a form in the DOM. Something like myForm.setFormData() (which I totally made up in) this example:

var myFormData = new FormData();
myFormData.append(...); //etc...

var myForm = document.getElementById('myForm');
myForm.setFormData(myFormData);
//Now myForm contains all fields from myFormData

Is there any way to apply FormData to an existing form?

If I have an existing form, I know I can effectively "convert" it to FormData by passing the form to the FormData constructor like in this example:

var myForm = document.getElementById('myForm');

var myFormData = new FormData(myForm);
//Now myFormData contains all fields from myForm

Is there any way to effectively do the inverse of this operation? I have an existing FormData object, and I want to apply its fields to a form in the DOM. Something like myForm.setFormData() (which I totally made up in) this example:

var myFormData = new FormData();
myFormData.append(...); //etc...

var myForm = document.getElementById('myForm');
myForm.setFormData(myFormData);
//Now myForm contains all fields from myFormData

Is there any way to apply FormData to an existing form?

• javascript
• html
• forms
• form-data

• There isn't, The FormData object does not expose any of the fields it contains. All it has is the append method. – Musa Commented Dec 29, 2013 at 19:02
• @Musa - So it's literally only useful in an ajax context? Is there any other way to even use FormData except via xhr? – wxactly Commented Dec 29, 2013 at 19:07
• As far as I can tell FormData is only used with XMLHttpRequest.send – Musa Commented Dec 29, 2013 at 19:24
• there is a way in this post stackoverflow./questions/42406520/… – felipeaf Commented Jan 8, 2024 at 20:00
• Does this answer your question? Populate an HTML Form from a FormData object – Heretic Monkey Commented Apr 17, 2024 at 19:45

1 Answer 1

The ment by Musa is in alignment with the MDN documentation Using FormData Objects:

The FormData object lets you pile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data.¹

Unfortunately, there appears to (currently) be no such method to apply fields from a FormData object onto a <form>.

As this answer demonstrates, one could iterate over the entries of the FormData object, look for the input in the form and set the checked or value properties appropriately.

// modified from https://stackoverflow./a/52012235/1575353
function formDeserialize(form, data) {
  for (const [key, val] of (new URLSearchParams(data)).entries()) {
    const input = form.elements[key];
    if (input.type === 'checkbox') {
      input.checked = !!val;
    } else {
      input.value = val;
    }
  }
}
document.addEventListener('click', event => {
  if (event.target.id === 'deserialize') {
    const myFormData = new FormData();
    myFormData.append('username', 'wxactly');
    myFormData.append('language', 'JavaScript');
    myFormData.append('points', 42);
    myFormData.append('human', true);
    myFormData.append('color', 'blue');
    myFormData.append('shape', 'ellipse');
    formDeserialize(document.forms[0], myFormData);
  }
});

<form>
  <div>
    <label>
      Username: <input type="text" name="username" />
    </label>
  </div>
  <div>
    <label>
      Language: <input type="text" name="language" />
    </label>
  </div>
  <div>
    <label>
      Points: <input type="number" name="points" />
    </label>
  </div>
  <div>
    <label>
      Human: <input type="checkbox" name="human" />
    </label>
  </div>
  <div>
    Favorite Color:
    <label>
        Red
        <input type="radio" name="color" value="red" />
        </label>
    <label>
        Blue
        <input type="radio" name="color" value="blue" />
      </label>
  </div>
  <div>
    <label>
      Shape:
      <select name="shape">
        <option></option>
        <option value="circle">Circle</option>
        <option value="ellipse">Ellipse</option>
      </select>
    </label>
  </div>
</form>
<button id="deserialize">Deserialize FormData</button>

¹_{https://developer.mozilla/en-US/docs/Web/API/FormData/Using_FormData_Objects}