0

I use folowing JSON obj and jquery.dFrom plugin to dynamicaly create this form :

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

generated form :

<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>

How to build JSON obj back from generated form elements with updated values like this :

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

3 回答 3

0

There isn't really a way to reverse engineer an existing form back into a JSON object. The best way to deal with this is probably separating the form data from the definition and setting/retrieving it from a separate JSOn object. I usually recommend jQuery++ formParams for this. So you will be able to set data (after generating the form) like this:

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

And retrieve your example data like this:

$("#myform").formParams(); // { username: 'morowing', country: 'ca', password: 'mika2048' }
于 2013-07-22T16:43:17.337 回答
0

I was also searching for generate JSON from html and I found this https://bitbucket.org/ddevine/dform-generate/downloads link.

于 2014-11-05T09:18:08.753 回答
0

Seeing as @Daff points out this isn't possible with dForm, may I humbly suggest Metawidget?

It tracks the data bindings as it generates forms, and knows how to bind the changed values back to the original object. Simple example:

<!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-07T03:05:34.277 回答