如果我有一个现有的表单,我知道我可以通过将表单传递给 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应用到现有的表单上吗?
Musa 的评论与 MDN 文档使用 FormData 对象: 一致
对象可让您编译一组键/值对以使用XMLHttpRequest
发送。它主要用于发送表单数据,但可以独立于表单使用以传输键控数据。1
不幸的是,(目前)似乎没有这样的方法可以将 对象中的字段应用到 <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