有什么方法可以将 HTML Form schema 保存到 JSON 中吗?
例如当我遇到这样的事情时
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
我如何实现这样的目标:
[
{
field: 'input',
type: 'text',
name: 'firstname'
},
{
field: 'input',
type: 'text',
name: 'lastname'
},
]
我并不是说它必须像上面那样精确输出,但我如何才能实现类似的结果?
最佳答案
想法是做这样的事情。您可以遍历表单 elements
元素集合,并使用每个元素提取必要的信息。
在下面的代码中,我使用了 Array.prototype.map
方法,但使用简单的 for
循环可能会更方便。它会给你更多的定制空间。
function serializeSchema(form) {
return [].map.call(form.elements, function(el) {
return {
type: el.type,
name: el.name,
value: el.value
};
});
};
var form = document.querySelector('form'),
schema = serializeSchema(form);
alert(JSON.stringify(schema, null, 4));
<form>
<input type="text" name="firstname" value="Test">
<input type="text" name="lastname">
<select name="age" id="">
<option value="123" selected>123</option>
</select>
<input type="checkbox" name ="agree" value="1" checked> agree
</form>
还有一个注意事项。您要实现的目标与 jQuery 的 $.fn.serializeArray
非常相似。方法执行(它不收集 type
)。然而,扩展 serializeArray
以使其也返回元素的 type
非常简单。
关于javascript - 将 HTML 表单架构保存到 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27359276/