生成JSON從dynamicaly生成形式（jquery.dForm插件）

我使用如下因素JSON OBJ和jquery.dFrom plugin到dynamicaly創建這種形式：生成JSON從dynamicaly生成形式（jquery.dForm插件）

<script type="text/javascript"> 
$(function() { 
    // Generate a form 
    $("#myform").dform({ 
     "action" : "index.html", 
     "method" : "get", 
     "html" : 
     [ 
      { 
       "type" : "p", 
       "html" : "You must login" 
      }, 
      { 
       "name" : "username", 
       "id" : "txt-username", 
       "caption" : "Username", 
       "type" : "text", 
       "placeholder" : "E.g. [email protected]" 
      }, 
      { 
       "type" : "select", 
       "options" : { 
       "us" : "USA", 
       "ca" : "Canada", 
       "de" : { 
         "selected" : "selected", 
         "html" : "Germany" 
         } 
       } 
      }, 
      { 
       "name" : "password", 
       "caption" : "Password", 
       "type" : "password" 
      }, 
      { 
       "type" : "submit", 
       "value" : "Login" 
      } 
     ] 
    }); 
});

生成形式：

<form id="myform" action="index.html" method="get" class="ui-dform-form"> 
<p class="ui-dform-p">You must login</p> 
<label for="txt-username" class="ui-dform-label">Username</label> 
<input type="text" name="username" id="txt-username" placeholder="E.g. [email protected]" class="ui-dform-text"> 
<select class="ui-dform-select"> 
<option class="ui-dform-option" value="us">USA</option> 
<option class="ui-dform-option" value="ca">Canada</option> 
<option selected="selected" class="ui-dform-option" value="de">Germany</option> 
</select> 
<label class="ui-dform-label">Password</label> 
<input type="password" name="password" class="ui-dform-password"> 
<input type="submit" class="ui-dform-submit" value="Login"> 
</form>

如何使用更新值從生成的表單元素生成JSON對象像這樣：

$(function() { 
$("#myform").dform({ 
    "action" : "index.html", 
    "method" : "get", 
    "html" : 
    [ 
     { 
      "type" : "p", 
      "html" : "You must login" 
     }, 
     { 
      "name" : "username", 
      "id" : "txt-username", 
      "caption" : "Username", 
      "type" : "text", 
      "value" : "morowind" 
     }, 
     { 
      "type" : "select", 
      "options" : { 
      "us" : "USA", 
      "ca" : { 
        "selected":"Selected", 
        "html":"Canada" 
        }, 
      "de" : "Germany" 
      } 
     }, 
     { 
      "name" : "password", 
      "caption" : "Password", 
      "type" : "text", 
      "value": "mika2048" 
     }, 
     { 
      "type" : "submit", 
      "value" : "Login" 
     } 
    ] 
}); 
});

來源

2013-07-11 morowind

沒有一種方法可以將現有表單逆向工程化回JSON對象。處理這個問題的最好方法是將表單數據從定義中分離出來，並從單獨的JSOn對象中設置/檢索它。我通常爲此推薦jQuery++ formParams。所以，你將能夠設定數據是這樣的（生成表格後）：

$("#myform").formParams({ 
    username: 'Tester' 
});

和檢索數據。例如像這樣：

$("#myform").formParams(); // { username: 'morowing', country: 'ca', password: 'mika2048' }

來源

2013-07-22 16:43:17 Daff

我也從HTML和我尋找產生JSON發現這個https://bitbucket.org/ddevine/dform-generate/downloads鏈接。

來源

2014-11-05 09:18:08 Sagar

看到@Daff指出這是不可能與dForm，我可以虛心建議Metawidget？

它會在生成表單時跟蹤數據綁定，並知道如何將更改的值綁定回原始對象。簡單示例：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script> 
     <style> 
     #metawidget { 
      border: 1px solid #cccccc; 
      width: 250px; 
      border-radius: 10px; 
      padding: 10px; 
      margin: 50px auto; 
     } 
     #metawidget button { 
      display: block; 
      margin: 10px auto 0px; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="metawidget"> 
     <button onclick="save()">Save</button> 
     </div> 
     <script type="text/javascript"> 
     var mw = new metawidget.Metawidget(document.getElementById('metawidget')); 
     mw.toInspect = { 
      firstname: 'Homer', 
      surname: 'Simpson', 
      age: 36 
     }; 
     mw.buildWidgets(); 
     function save() { 
      mw.getWidgetProcessor(
       function(widgetProcessor) { 
        return widgetProcessor instanceof metawidget.widgetprocessor.SimpleBindingProcessor; 
       } 
      ).save(mw); 
      console.log(mw.toInspect); 
     } 
     </script> 
    </body> 
</html>

來源

2014-11-07 03:05:34

生成JSON從dynamicaly生成形式（jquery.dForm插件）

回答

相關問題