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:

var data = {
    Id : 71,
    Name: "",
    Phonenumber : "123123123123",
    Created: new DateTime(),
    Updated: new DateTime()
};

$("form").autoform(data, {yourOptions});

Produces:

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.

Options

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.

Label example

Filter example

Multiline example

Readonly example

$("#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 example

$("#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);
            };
        }
    }
});

Op­tions

La­bel examp­le

Fil­ter examp­le

Mul­tili­ne examp­le