Bootstrap 4 JSON Form Example

JSON

{
    hide_validation: false,
    fields: [
        {
            id: "name",
            name: "What is your name?",
            type: "field",
            field: {
                type: "text",
                placeholder: "Name",
                default_value: "Bob Smith"
            }
        },
        {
            id: "color",
            name: "What is your favorite color?",
            type: "field",
            field: {
                type: "color",
                placeholder: "Color"
            }
        },
        {
            id: "canttouchthis",
            name: "You can't touch this",
            type: "field",
            field: {
                type: "text",
                readonly: true,
                placeholder: "I'm a placeholder"
            }
        },
        {
            id: "notcheckedanddisabled",
            name: "Can't check me",
            type: "field",
            field: {
                type: "checkbox",
                readonly: true,
            }
        },
        {
            id: "checked",
            name: "Uncheck me",
            type: "field",
            field: {
                type: "checkbox",
                default_value: "true",
            }
        },
        {
            id: "abcradio",
            name: "A, B, or C?",
            type: "field",
            field: {
                type: "radio",
                // default_value: "Option B",
                options: ["Option A", "Option B", "Option C"]
            }
        },
        {
            id: "switchon",
            name: "Switch that is on by default",
            type: "field",
            field: {
                type: "switch",
                default_value: "true",
            }
        },
        {
            id: "select",
            name: "Pick a direction",
            type: "field",
            field: {
                type: "select",
                default_value: "Top",
                options: ["Left", "Right", "Top", "Bottom"]
            }
        },
    ]
}

Methods

var jsonForm = new JsonForm()
var formJson = {...}
jsonForm.create("#Form1", formJson, "Form1")
jsonForm.registerSubmit(MyFormHandler, "Form1")

Form

Data

Upon submission, your Submit Handler will be called with a (boolean, object) arguments. Submit the form above to see the object below.

Submit the form to see data