如何从表单创建 json？

Question

我正在使用 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

Answer 1

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

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