如何创建动态 html 表单的 JSON 对象（表单元素）？

Question

尝试创建动态 HTML 表单并保存它们，我可以使用引导程序创建动态表单，但在提交时我正在努力创建此动态表单的 JSON。 我正在寻找保存这样的东西

{
 "form" :
    [

        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. user@example.com"
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        },
        {
            "type" : "submit",
            "value" : "Login"
        }
    ]
}

我不知道如何才能做到这一点。

Answer 1

应该这样做：

function getAttrs(DOMelement) {
    var obj = {};
    $.each(DOMelement.attributes, function () {
        if (this.specified) {
            obj[this.name] = this.value;
        }
    });
    return obj;
}

$("form").each(function () {
    var json = {
        "form": []
    };
    $(this).find("input").each(function () {
        json.form.push(getAttrs(this));
    });

    $(this).find("select").each(function () {
        var select = getAttrs(this);
        select["type"] = "select";
        var options = [];
        $(this).children().each(function () {
            options.push(getAttrs(this));
        });
        select["options"] = options;
        json.form.push(select);
    });

    console.log(json);
});

演示：http://jsfiddle.net/j1g5jog0/

更新：http://jsfiddle.net/j1g5jog0/5/