Question

我正在寻找一种从JavaScript数据动态生成html表单的方法，以发送常规的post请求而不是Ajax调用。这似乎是一个有点罕见的用例，因为我只找到Form-＆gt; JSON的结果。

我希望这样做：

var form = $('<form Action="/"><Input type="hidden" Name="data" value="5"/></form>');
form.appendTo($("body")).submit();

动态地使用来自JavaScript对象的数据，假设示例：

var form = $.createForm({ action: "/", data: myData });    
form.appendTo($("body")).submit();

是否有任何jQuery插件或JS片段可以生成表单？

更新：myData当然是一个复杂的对象，而不是一个或两个表单字段，因此我想自动化它。现在我正在将数据序列化为json并像所描述的那样发布，但我想正确地发送数据。

更新2 ：我希望按照$ .deserialize的方式做一些事情，只是该函数应生成必要的表单，而不只是填充现有的表单

Answer 1

jQuery本身足够动态来创建DOM元素：

var $form = $('<form/>', {
   action: '...',
   html: function() {
       return $('<input/>', {
          name: '...',
          value: '...'
       })
   },
   foo: 'bar'
});

您还可以根据您的要求定义构造函数，例如：

var FormMaker = function (options) {
    this.$el = $('<form/>', options.props);
    this.$elements = $.map(options.elements, function (element, i) {
        return $('<' + element.type + '/>', element.props);
    });
    // ...
    this.$el.append(this.$elements);
    return this;
}

var form = new FormMaker({
    props: {
        action: 'somewhere',
        method: '...',
        submit: function() {
           console.log('submitted');
        }
    },
    elements: [{
        type: 'input',
        props: {
            type: 'text',
            value: 'aValue',
            // ...
        }
    }, {
        type: 'p',
        props: {
            text: '...'
        }
    }]
}); 

form.$el.appendTo('#somewhere');

Answer 2

此函数根据参数：

中的对象创建表单

 function makeForm(obj) {
        var form = document.createElement('form');
        form.action="/";
        var input = document.createElement('input');
        input.name = obj.name;
        input.value = obj.value;
        form.appendChild(input);
        document.body.appendChild(form);
    }

DEMO

Answer 3

我可以谦卑地建议Metawidget吗？

它从任意复杂的JSON对象生成HTML表单。简单的JavaScript示例：

<!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;
         }
      </style>
   </head>
   <body>
      <div id="metawidget"></div>
      <script type="text/javascript">
         var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ));
         mw.toInspect = {
            firstname: 'Homer',
            surname: 'Simpson',
            age: 36
         };
         mw.buildWidgets();
      </script>
   </body>
</html>

它还支持：

使用其他元数据源扩充JSON对象，例如JSON Schema或来自REST服务的元数据
框架，如JQuery UI，JQuery Mobile，AngularJS
第三方组件库
可插拔布局

从Javascript-Object生成表单

3 个答案: