将 HTML 表单架构保存为 JSON

Save HTML form schema to JSON

本文关键字：保存 JSON HTML 表单      更新时间：2023-09-26

有没有办法将HTML表单架构保存到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元素非常简单。

相关文章：