JSON Schema To HTML Form Creator With jQuery - Medea

Medea is a dynamic jQuery form creation plugin which enables you to generate a dynamic HTML form from a JSON Schema.

Also has the ability to update the JSON objects as the form fields are changed, supporting nested attributes, arrays, and objects.

You're also able to add, duplicate, remove, update the form fields with corresponding event handlers.

Basic usage:

1. Download and place the jQuery Medea plugin's script after jQuery but before you close the body tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.medea.js"></script>

2. Create a contaner element for the generated form.

<div id="form"></div>

3. Define the data in a JavaScript or JSON object.

var testObject = { 
    name: { 
        firstName: "John",
        lastName: "Smith"
    },
    personal: { 
        age: 42,
        likesIceCream: true
    },
    hobbies: [ 
        "football",
        "golf"
    ],
    address: { 
        road: { number: "1", street: "the street" },
        town: "townington",
        county: "Shireshire"
    }
};

4. The JavaScript to populate the form with the data.

$("#form").medea(testObject);

5. Default plugin options.

$("#form").medea(testObject,{

  // removes the elements on submit
  removeOnSubmit: false, 

  // shows Save and Cancel buttons
  buttons: true,

  // the number of columns for labels
  labelColumns: 2,

  // the number of columns for inputs
  inputColumns: 10,

  // uses DIV instead of Form tag
  noForm: false
  
});

6. Available event handlers.

$("#form").on("medea.submit", function(updated-json-object) { 
  // update JSON object on submit
});

$("#form").on("medea.toggle", function(e, obj) { 
  // triggered on toggle
});

$("#form").on("medea.cancel", function(e, obj) { 
  // triggered when the cancel button is clicked
});

$("#form").on("medea.add", function(e, obj) { 
  // triggered when a new field is added
});

$("#form").on("medea.remove", function(e, obj) { 
  // triggered when new field is removed
});

---

This awesome jQuery plugin is developed by julianbrowne. For more Advanced Usages, please check the demo page or visit the official website.