如何創建創建JSON對象動態HTML表單（表單元素）？

試圖創建動態HTML表單和保存它們，我可以用引導創建動態的形式，但在提交我奮力打造這個充滿活力的形式的JSON。我希望節省這樣的事情如何創建創建JSON對象動態HTML表單（表單元素）？

{ 
"form" : 
    [ 

     { 
      "name" : "username", 
      "id" : "txt-username", 
      "caption" : "Username", 
      "type" : "text", 
      "placeholder" : "E.g. [email protected]" 
     }, 
     { 
      "name" : "password", 
      "caption" : "Password", 
      "type" : "password" 
     }, 
     { 
      "type" : "submit", 
      "value" : "Login" 
     } 
    ] 
}

我不知道我怎樣才能做到這一點。

來源

2014-12-19 user986508

你想達到什麼exacltly？你想發送你所有的表單屬性？或只有輸入？ – nowiko 2014-12-19 10:19:21

我動態創建的所有形式的屬性（HTML形式）。我想保存表單屬性，這些屬性的JSON對象（類型，值（如果有的話），姓名，身份證..）。 – user986508 2014-12-19 10:21:23

爲僅發送值可以使用$（「形式」）serializeArray（）; ...但屬性我不知道......我想ATTR（）函數可以幫助你。 – nowiko 2014-12-19 10:25:49

這應做到：

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); 
});

DEMO：http://jsfiddle.net/j1g5jog0/

更新：http://jsfiddle.net/j1g5jog0/5/

來源

2014-12-19 10:43:29

有一個問題，

如何創建創建JSON對象動態HTML表單（表單元素）？

回答