DHTMLX Docs & Samples Explorer

Index
dhtmlxForm
Control Types & Attributes

# JSON configuration

    var formData = [
    	{type: "radio", name: "choose", value: "online", label: "Will enjoy the online demo"},
    	{type: "radio", name: "choose", value: "senddisk", label: "Please send me disk", checked: true, list:[
    	{type: "checkbox", name: "bootleg", value: "yes", label: "Insert bootleg", checked: true},
    		{type: "checkbox", name: "lirycs", value: "jaja", label: "Lyrics if possible", checked: true},
    		{type: "label", label: "Payment"},
    		{type: "radio", name: "paymenttype", value:"creditcard", label:"Credit Card", list:[
    			{type: "input", name: "cardnumber", value: "XXXX-XXXX-XXXX-XXXX", label:"Card Number"},
    			{type: "input", name: "cardkey", value: "XXXX", label: "Key"}
    		]},
    		{type: "radio", name: "paymenttype", value:"cash", label:"Cash", checked: true},
    		{type: "label", label: "Currency"},
    		{type: "radio", name: "currencytype", value: "dollar", label: "U. S. Dollars", checked: true},
    		{type: "radio", name: "currencytype", value: "euro", label :"Euro"},
    		{type: "radio", name: "currencytype", value: "brb", label: "Belarusian Rubel"},
    		{type: "select", name: "mediatype", label: "Select Media Type", options:[
    			{value: "1", text: "CD 700Mb", list:[
    				{type: "checkbox", name: "overburn", value: "yes_1", label: "Overburn", checked: true}
    			]},
    			{value: "2", text: "DVD5 4.4Gb", list:[
    				{type: "checkbox", name: "lightscribe", value: "yes", label: "Light Scribe", checked: true},
    				{type: "checkbox", name: "labelflash", value: "yes", label: "Label Flash", checked: false, list:[
    					{type: "radio", name: "labelflash_radio", value: "required", label: "Required", checked: true},
    					{type: "radio", name: "labelflash_radio", value: "not_mandatory", label: "Not bad option"}
    				]}
    			]},
    			{value: "2", text: "DVD5 4.4Gb"},
    			{value: "3", text: "DVD9 8.6Gb", selected: true},
    			{value: "4", text: "Blue-Ray 24Gb"}
    		]},
    		{type: "select", name: "audioquality", label: "Select Audio Quality", options:[
    			{value: "1", text: "2.0 16bit/128kbps"},
    			{value: "2", text: "2.1 16bit/334kbps"},
    			{value: "3", text: "5.1 32bit/448kbps", selected: true}
    		]},
    		{type: "select", name: "videoquality", label: "Select Video Quality", options:[
    			{value: "1", text: "DVD MPEG-2", selected: true},
    			{value: "2", text: "DivX"},
    			{value: "3", text: "XviD"}
    		]},
    		{type: "input", name: "comments", label: "Comments", value: "Some Comments", rows: 3}
    	]},
    	{type: "hidden", name: "hiden_data", value: "some_value"},
    	{type: "file", name: "my_file", label: "Schoose file"},
    	{type: "button", value: "Submit"}
    ];

Each item-object can have 'bind' property to define binding or 'validate' property to define validation rules.
Items of 'select' controls can have 'connector' property to load options.