如何从JSON创建表单，如何全局获取表单值？

Question

我已经用haml创建了表单，我只想用这个jsonForm构建器进行优化。

下面是我用参考文档创建的示例表单：

https://github.com/joshfire/jsonform

$('form').jsonForm({
    schema: {
        name: {type: 'string', title: 'Name', required: true},
        age: {type: 'number', title: 'Age', required: true},
        choice: {type: 'string',title: 'Title', 'enum': ['choice-1','choice-2','choice-3']}
    },
    onSubmit: function (errors, values) {
      if (errors) {
        $('#res').html('<p>I beg your pardon?</p>');
      }
      else {
        $('#res').html('<p>Hello ' + values.name + '.' +
          (values.age ? '<br/>You are ' + values.age + '.' : '') +
          '</p>');
      }
    }
});

但我也需要在全球范围内获得这些价值。

我该怎么做？

Answer 1

一种方法是使用jQuery助手方法将表单序列化为数组，然后将数组转换为JSON。我在这里创造了一把小提琴：

http://jsfiddle.net/kamatanay/fchgS/

HTML：

<form></form>

<button id="theButton">Try</button>

Javascript：

$("#theButton").click(function(){
    var dataJson = {};
    $($("form").serializeArray()).map(function(){
        dataJson[this.name] = this.value;
    });
    console.log(dataJson);
});

$('form').jsonForm({
        schema: {
          name: {
            type: 'string',
            title: 'Name',
            required: true
          },
          age: {
            type: 'number',
            title: 'Age'
          }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html('<p>Hello ' + values.name + '.' +
              (values.age ? '<br/>You are ' + values.age + '.' : '') +
              '</p>');
          }
        }
      });

我希望它能帮上忙！