是否有更好/更简单的方法将html表单序列化为对象？
是否有更好/更简单的方法将html表单序列化为对象？
提问于 2020-12-14 10:43:34
我发送了一个同时包含radio和checkbox输入的表单(因此多个元素具有相同的名称)，这就是我想出的方法。
有没有一种更快、更简单的纯JavaScript方法将HTML form转换成object，以便我可以使用JSON.stringify？
没有框架或库。
function serialize_form(felement) {
const names = new Set();
let values = {}
for(let i = 0; i < felement.elements.length; i++) {
if(felement[i].name && (felement.name != undefined || felement.name != "")){
names.add(felement[i].name)
}
}
for(let name of names) {
values[name] = felement[name].value;
}
console.log(names, values);
return values;
}回答 2
Stack Overflow用户
发布于 2020-12-14 11:38:07
您可以使用FormData.keys()和FormData.getAll()进行一些简单的转换
document.querySelector("form").addEventListener("submit", e => {
e.preventDefault()
const fd = new FormData(e.target)
const obj = Object.fromEntries(Array.from(fd.keys(), key => {
const val = fd.getAll(key)
return [ key, val.length > 1 ? val : val.pop() ]
}))
document.querySelector("pre").innerHTML = JSON.stringify(obj, null, 2)
})<form>
<p><input type="text" name="text" value="text value"></p>
<p>
Checkboxes:
<label>Foo <input type="checkbox" value="foo" name="checkbox"></label>
<label>Bar <input type="checkbox" value="bar" name="checkbox"></label>
<label>Baz <input type="checkbox" value="baz" name="checkbox"></label>
</p>
<p>
Select:
<select name="select" multiple>
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
</p>
<p><button>Serialize</button></p>
</form>
<pre></pre>
请注意，这会根据所做的选择数来更改数组和字符串之间的值。如果你想要一个更一致的API，只需要对每个值使用数组，即使只有一个选择。
const obj = Object.fromEntries(Array.from(fd.keys(), key =>
[ key, fd.getAll(key) ]))Stack Overflow用户
发布于 2020-12-14 10:56:02
感谢@brad指出FormData，我能够削减我的serialize_form函数，这导致了这个答案https://stackoverflow.com/a/46774073/9908。
function serialize_form(felement) {
const fd = new FormData(felement);
let object = {};
fd.forEach((value, key) => {
// Reflect.has in favor of: object.hasOwnProperty(key)
if(!Reflect.has(object, key)){
object[key] = value;
return;
}
if(!Array.isArray(object[key])){
object[key] = [object[key]];
}
object[key].push(value);
});
console.log(object);
return object;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65282973
复制相关文章
相似问题
腾讯云开发者
