如何从Form创建json?

时间:2015-06-16 06:03:37

标签: javascript jquery json forms

我使用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 个答案:

答案 0 :(得分:0)

jQuery serializeArray()可以满足您的需求。只需添加其他详细信息,例如var jsonString = $("#myForm").serializeArray(); //...add your stuff here like method, etc... 等。

$ cat file
header: id,indicator,{(pid,days_remaining)}
row:    id_558314,1,{(property_66021,7),(property_24444,1),(property_285395,6)}

$ awk -F, '{gsub(/[{}()]/,"")}FNR==1{print;next}{j=0;p=$1;for(i=3; i<=NF; i+=2){ $1=p;sub(/:/,++j"&",$1);print $1,$2,$i,$(i+1)}}' OFS=,  file
header: id,indicator,pid,days_remaining
row1:    id_558314,1,property_66021,7
row2:    id_558314,1,property_24444,1
row3:    id_558314,1,property_285395,6