是否可以将 FormData 应用到现有表单?

问题描述 投票:0回答:1

如果我有一个现有的表单,我知道我可以通过将表单传递给 FormData 构造函数来有效地将其“转换”为 FormData,如下例所示:

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

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

有什么方法可以有效地执行此操作的逆操作吗?我有一个现有的 FormData 对象,我想将其字段应用到 DOM 中的表单。像

myForm.setFormData()
(这完全是我编造的)这个例子:

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

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

有什么方法可以将FormData应用到现有的表单上吗?

javascript html forms form-data
1个回答
6
投票

Musa评论与 MDN 文档使用 FormData 对象: 一致

FormData

对象可让您编译一组键/值对以使用XMLHttpRequest
发送。它主要用于发送表单数据,但可以独立于表单使用以传输键控数据。
1

不幸的是,(目前)似乎没有这样的方法可以将

FormData

 对象中的字段应用到 <form>
 上。

this answer所示,可以迭代 FormData 对象的条目,查找表单中的输入并适当设置 checked

value
 属性。

function formDeserialize(form, data) { const entries = (new URLSearchParams(data)).entries(); for(const [key, val] of entries) { //http://javascript-coder.com/javascript-form/javascript-form-value.phtml const input = form.elements[key]; switch(input.type) { case 'checkbox': input.checked = !!val; break; default: input.value = val; break; } } } document.addEventListener('click', event => { if (event.target.nodeName === 'BUTTON') { const myFormData = new FormData(); myFormData.append('username', 'wxactly'); myFormData.append('language', 'JavaScript'); myFormData.append('human', true); myFormData.append('color', 'blue'); 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>
      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>

</form>
<button>Deserialize FormData</button>


1https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

© www.soinside.com 2019 - 2024. All rights reserved.