Created forms from JSON Schema, How to get form values globally?

Question

I have created form with haml and I just want to optimize with this jsonForm builder.

Following is sample form I created with reference document:

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>');
      }
    }
});

But I also need to get those values globally.

How can I do this?

Answer 1

One way is to serialize the form to array using jQuery helper methods and then convert the array to JSON format. I have created a fiddle for it here:

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>');
          }
        }
      });

I hope that it helps!