Question

我使用以下JSON obj和jquery.dFrom plugin动态创建此表单：

<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. user@example.com"
            },
            {
                "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. user@example.com" 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 obj，如下所示：

$(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"
        }
    ]
});
});

Answer 1

没有办法将现有表单反向工程回JSON对象。处理此问题的最佳方法是将表单数据与定义分开，并从单独的JSOn对象中设置/检索它。我通常会为此推荐jQuery++ formParams。因此，您将能够设置数据（生成表单后），如下所示：

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

并检索您的示例数据：

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

Answer 2

我也在搜索从html生成JSON，我找到了这个https://bitbucket.org/ddevine/dform-generate/downloads链接。

Answer 3

看到@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>

从动态生成的表单构建JSON（jquery.Form插件）

3 个答案: