Autoform JS-JSON to FORM jQuery plugin

Automatically changes JSON data into a form based on a simple jQuery plugin function.
Updated: 16.10.2016 21:30
Automatically forms from your JSON data:
Select all
var data = {
    Id : 71,
    Name: "",
    Phonenumber : "123123123123",
    Created: new DateTime(),
    Updated: new DateTime()

$("form").autoform(data, {yourOptions});
The code is simple and easy to use. It is made so you can start quickly with a draft of your form, and extend / tune it with simple to use options with a lot of flexibility.


Most of the options you can specify are callback functions you can use really easily to specify more details about your form.
Options Description
label function(field) - Function that returns an alternate label for a field. If it returns null the
multiline function(field) - Function that returns true for multiline textfields.
list function($control, value, populateFunc) - Function that returns calls the populateFunc with a list of items to make available in a dropdown.
readonly function(field) - Function that returns true for readonly fields.
filter function(field) - Function that returns
type function(field) - Function that returns <input> type. (Used in the type attribute)
See examples below.

La­bel examp­le

Select all

Fil­ter examp­le

Select all

Mul­tili­ne examp­le

Select all

Rea­don­ly examp­le

Select all
$("#Properties").autoform(jsondata, {
    readonly : function(key) {
        if (key == "Created") return true; // Prevent user from changing the created time field
        if (key == "Updated") return true; // Prevent user from changing the updated time field

List examp­le

Select all
$("#Properties").autoform(jsondata, {
    list: function (key) {
        if (key == "fk_ProviderId") {
            return function ($input, value, populate) {
                // Query the server for id value list to show in dropdown:
                $app.Query("select Id AS value, Name AS text from WorkItemProvider").done(populate);