如何从表单创建 json?

Posted

技术标签:

【中文标题】如何从表单创建 json?【英文标题】:How to create json from Form? 【发布时间】:2015-08-31 19:36:46 【问题描述】:

我正在使用 Drag n Drop FormBuilder 来创建表单。

现在我想像这样创建这种形式的 JSON:


   "action":"hello.html",
   "method":"get",
   "enctype":"multipart/form-data",
   "html":[
        
          "type":"p",
          "html":"You must login"
        ,
        
          "name":"username",
          "id":"txt-username",
          "caption":"Username",
          "type":"text",
          "placeholder":"E.g. user@example.com"
        ,
        
          "name":"password",
          "caption":"Password",
          "type":"password"
        , 
        
         "name":"description",
         "caption":"Description",
         "type":"textarea"
       ,
       
          "name":"file",
          "caption":"Select File",
          "type":"file",
          "multiple":true,
          "id":"file2"
       ,
       
         "name":"number",
         "caption":"Your number",
         "type":"text"
       ,
       
         "name":"email",
         "caption":"Your email",
         "type":"text"
      ,
      
         "type":"radiobuttons",
         "name":"gender",
         "class":"",
         "options":
             "male":
                 "value":"male",
                 "caption":
                    "html":"Male",
                  ,
             ,
            "female":
                 "value":"female",
                 "caption":
                     "html":"Female"
             
         
      ,
      
        "type":"checkboxes",
        "name":"color[]",
        "options":
           "blue":
              "value":"blue",
              "caption":"html":"Blue"
            ,
           "red":
               "value":"red",
               "caption":"html":"Red"
           ,
          "black":
             "value":"black",
             "caption":"html":"Black",,
          
       
    ,

    
        "type":"submit",
       "value":"Login"
    
  ]

我正在使用这个表单生成器http://getfuelux.com/formbuilder.html 来构建表单。

现在,当我将任何元素拖到区域时,我想要上面提到的那个字段的 json。如何创建表单的json

【问题讨论】:

【参考方案1】:

jQuery serializeArray() 可以满足您的需求。只需添加其他详细信息,例如 method 等。

var jsonString = $("#myForm").serializeArray();
//...add your stuff here like method, etc...

【讨论】:

你能举个例子吗 没有提供所有信息,如占位符、标签、..这不像我在上面提到的那样

以上是关于如何从表单创建 json?的主要内容,如果未能解决你的问题,请参考以下文章

如何从具有相同名称的字段的表单创建 JSON 文件?

如何创建动态 html 表单的 JSON 对象(表单元素)?

从 vuejs 表单数据创建 JSON 对象

如何在formbuilder中从JSON模式生成表单

如何在ExtJS Tabpanel中显示JSON表单字段?

如何使用 JSON 定义创建 html 表单?