javascript - Is it possible to apply FormData to an existing form? - Stack Overflow

admin管理员组

文章数量:1355532

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

Share Improve this question Follow edited Sep 12, 2017 at 18:21 Sᴀᴍ Onᴇᴌᴀ 8,28388 gold badges3737 silver badges6060 bronze badges asked Dec 29, 2013 at 18:58 wxactlywxactly 2,47011 gold badge2828 silver badges4444 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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}

本文标签： javascriptIs it possible to apply FormData to an existing formStack Overflow