如何创建动态 HTML 表单的表单元素的 JSON 对象?

3

我正在尝试创建动态HTML表单并保存它们。我可以使用Bootstrap创建动态表单,但在提交时,我无法创建此动态表单的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"
        }
    ]
}

我不确定如何实现这一点。


你想要实现什么?你想要发送所有表单属性吗?还是只有输入框? - nowiko
我创建了动态的表单属性(HTML表单),我想要保存该表单属性的JSON对象(类型,值(如果有),名称,ID等)。 - user986508
对于只发送值,您可以使用 $(“form”)。serializeArray(); 但是对于属性,我不知道...我认为attr()函数可能会帮助您。 - nowiko
我曾尝试使用DOM,但应该有一些标准的方法.. 啊啊 - user986508
1个回答

5
这应该可以做到:
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/


这里有一个问题,<select> 和它的 <options> 不被此解决方案所捕获。 - user986508
@user986508 好的,您希望选择存储后怎么办?是这样的格式吗? {"type": select, "options": [{...}, {...}, {...}]} - Johan Karlsson
是的,有点像这样的内容,{ "form": [ { "name": "username", "id": "txt-username", "caption": "用户名", "type": "文本", "placeholder": "例如 user@example.com" }, { "name": "password", "caption": "密码", "type": "密码" }, { "name": "country", "type": "选择", "options": [ { "name": "日本" }, {"name": "泰国"},{"name": "西班牙"}]}]} - user986508
@caeth 感谢您提供的示例。请问您能否帮助我查看成功创建的JSON对象中的数据? - rachana

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接