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

Posted 2023-05-09

【中文标题】如何创建动态 html 表单的 JSON 对象（表单元素）？

【英文标题】：How to create create JSON object ( of form elements) of dynamic html form?

【发布时间】：2015-02-18 06:14:33

【问题描述】：

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

 "form" :
    [

        
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. [e-mail]"
        ,
        
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        ,
        
            "type" : "submit",
            "value" : "Login"
        
    ]

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

【问题讨论】：

您到底想达到什么目标？您想发送所有表单属性吗？还是只输入？

我动态创建的所有表单属性（html 表单）。我想保存该表单属性的 JSON 对象（类型、值（如果有）、名称、id ..）。

对于仅发送值，您可以使用 $("form").serializeArray();...但是对于我不知道的属性...我认为 attr() 函数可能会对您有所帮助。跨度>

我在尝试使用 DOM，但应该有一些标准的方式.. 啊

【参考方案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/

【讨论】：

有一个问题， 及其 未被此解决方案捕获。

@user986508 好的，那么您希望如何存储选择，像这样？ "type": select, "options": [..., ..., ...]

是这样的， "form": [ "name": "username", "id": "txt-username", "caption": "Username", "type": “文本”，“占位符”：“例如 [e-mail]”，“名称”：“密码”，“标题”：“密码”，“类型”：“密码”，“名称”：“国家”，“类型”：“选择”，“选项”：[ “名称”：“日本”，“名称”：“泰国”，“名称”：“西班牙”]]

@caeth 感谢您提供的示例。您能帮我看看如何在 json 对象中成功创建数据吗？