Check documentation for the latest version 6.0 of dhtmlxSuite JSON Format DHTMLX Docs

JSON Format

We recommend you to use JSON format as it's the handiest way of initialization.

Initial Data

As initial data we'll take the following form:

JSON Format Example

In JSON the data will look as:

welcome.json

[
    {type:"fieldset", name:"data", label:"Welcome", inputWidth:"auto", list:[
        {type:"input",    name: "name", label:"Login"},
        {type:"password", name:"pass",  label:"Password"},  
        {type:"button",   name:"save",  value:"Proceed"}] 
    }
]

Form Initialization

from JSON object

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>
 
<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
        var myForm, formData;
        function doOnLoad() {
            formData = [
                {type:"fieldset", name:"data", label:"Welcome", inputWidth:"auto", 
                 list:[
                    {type:"input",    name:'name', label:'Login'},
                    {type:"password", name:"pass", label:"Password"},
                    {type:"button",   name:"save", value:"Proceed"}] 
                }
            ]
            myForm = new dhtmlXForm("form_container", formData);
        }
</script> </body> </html>

from JSON file

welcome.html

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>
 
<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
        var myForm;
        function doOnLoad() {
            myForm = new dhtmlXForm("form_container");
            myForm.loadStruct("welcome.json");
        }
</script> </body> </html>

Code samples for specific items

combo:

var formData = [
    {type: "combo", label: "Select Location", inputWidth:120, options:[
        {text: "Open Air",      value: "1"},
        {text: "Private Party", value: "2"}
    ]}
];

multiselect:

var formData = [
    {type: "multiselect", label: "Can create/edit/delete users=", inputHeight:90,
      inputWidth:130, options:[
        {text: "Administrators",    value: "Option 1", selected: true}, 
        {text: "Power users",       value: "Option 2", selected: true},
        {text: "Registered users",  value: "Option 3"},
        {text: "Guests",            value: "Option 4"},
        {text: "All users",         value: "Option 5"}
    ]}
];

radio:

var formData = [
    {type: "radio", name: "effect", label: "No effects", value: "by_pages", 
       position:"label-right", readonly:"true"},
    {type: "radio", name: "effect", label: "Effects", value: "custom", 
       checked:"true", position:"label-right"},
    {type: "radio", name: "opt2", label: "Shadow", position:"label-right", 
       checked:"true"},
    {type: "radio", name: "opt2", label: "Perspective", position:"label-right"},
    {type: "radio", name: "opt2", label: "Shear", position:"label-right"},
    {type:"button", value:"Proceed"}
];

select:

var formData = [
    {type: "select", label: "Welcome", inputWidth:"100",options:[
        {text: "Admin", value: "admin",list:[
            {type:"checkbox",label:"Show logs window"},
            {type:"checkbox",label:"Show advanced options"}
        ]},
        {text: "Organiser", value: "org"},
        {text: "Power User", value: "poweruser"},
        {text: "User", value: "user", selected:true}
    ]}
];

settings:

var formData = [
    {type:"settings",position:"label-left",labelWidth:120,inputWidth:120,
       labelAlign:"right"},
    {type: "input",     label: "Name",      value: "John Smith"},
    {type: "password",  label: "Password",  value: "123"}
];
Back to top