When form created from configuration you can create the next types of controls
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 rule
item's of select-type can have “connector” property to load options
<?xml version="1.0"?> <items> <item type="radio" name="select" value="online" label="Will enjoy the online demo"/> <item type="radio" name="select" value="disk" label="Please send me disk" checked="true"> <item type="checkbox" name="bootleg" label="Insert bootleg" checked="true"/> <item type="checkbox" name="lyrics" label="Lyrics if possible" checked="true"/> <item type="label" label="Payment"/> <item type="radio" name="paymenttype" value="creditcard" label="Credit Card"> <item type="input" name="cardnumber" value="XXXX-XXXX-XXXX-XXXX" label="Card Number"/> <item type="input" name="cardkey" value="XXXX" label="Key"/> </item> <item type="radio" name="paymenttype" value="cash" label="Cash" checked="1"/> <item type="label" label="Currency"/> <item type="radio" name="currencytype" value="dollar" label="U. S. Dollars" checked="1"/> <item type="radio" name="currencytype" value="euro" label="Euro"/> <item type="radio" name="currencytype" value="rub" label="Russian Rubel"/> <item type="select" name="mediatype" label="Select Media Type"> <option value="1" text="CD 700Mb"> <item type="checkbox" name="overburn" value="yes_1" checked="true" label="Overburn"/> </option> <option value="2" text="DVD5 4.4Gb"> <item type="checkbox" name="lightscribe" value="yes" checked="true" label="Light Scribe"/> <item type="checkbox" name="labelflash" value="yes" label="Label Flash"> <item type="radio" name="labelflash_radio" value="required" checked="true" label="Required"/> <item type="radio" name="labelflash_radio" value="not_mandatory" label="Not bad option"/> </item> </option> <option value="3" text="DVD9 8.6Gb" selected="1"/> <option value="4" text="Blue-Ray 24Gb"/> </item> <item type="select" name="audioquality" label="Select Audio Quality"> <option value="1">2.0 16bit/128kbps</option> <option value="2">2.1 16bit/334kbps</option> <option value="3" selected="1">5.1 32bit/448kbps</option> </item> <item type="select" name="videoquality" label="Select Video Quality"> <option value="1" text="DVD MPEG-2" selected="1"/> <option value="2" text="DivX"/> <option value="3" text="XviD"/> </item> <item type="input" label="Comments" value="Some Comments" rows="3"/> </item> <item type="hidden" name="hiden_data" value="some_value"/> <item type="file" name="my_file" label="Schoose file"/> <item type="button" value="Submit"/> </items>
Each item tag can have “bind” attribute to define binding or “validate” attribute to define validation rule
item's of select-type can have “connector” attribute to load options
<ul class="dhtmlxForm"> <li ftype="radio" name="select" value="online">Will enjoy the online demo</li> <li ftype="radio" name="select" value="disk" checked="true">Please send me disk <ul> <li ftype="checkbox" name="bootleg" checked="true">Insert bootleg</li> <li ftype="checkbox" name="lyrics" checked="true">Lyrics if possible</li> <div>Payment</div> <li ftype="radio" name="paymenttype" value="creditcard">Credit Card <ul> <li ftype="input" name="cardnumber" value="XXXX-XXXX-XXXX-XXXX">Card Number</li> <li ftype="input" name="cardkey" value="XXXX">Key</li> </ul> </li> <li ftype="radio" name="paymenttype" value="cash" checked="1">Cash</li> <div>Currency</div> <li ftype="radio" name="currencytype" value="dollar" checked="1">U. S. Dollars</li> <li ftype="radio" name="currencytype" value="euro">Euro</li> <li ftype="radio" name="currencytype" value="brb">Belarusian Rubel</li> <li ftype="select" name="mediatype">Select Media Type <ul> <li ftype="option" value="1">CD 700Mb <ul> <li ftype="checkbox" name="overburn" value="yes_1" checked="true">Overburn</li> </ul> </li> <li ftype="option" value="2">DVD5 4.4Gb <ul> <li ftype="checkbox" name="lightscribe" value="yes" checked="true">Light Scribe</li> <li ftype="checkbox" name="labelflash" value="yes">Label Flash <ul> <li ftype="radio" name="labelflash_radio" value="required" checked="true">Required</li> <li ftype="radio" name="labelflash_radio" value="not_mandatory">Not bad option</li> </ul> </li> </ul> </li> <li ftype="option" value="3" selected="1">DVD9 8.6Gb</li> <li ftype="option" value="4">Blue-Ray 24Gb</li> </ul> </li> <li ftype="select" name="audioquality">Select Audio Quality <ul> <li ftype="option" value="1">2.0 16bit/128kbps</li> <li ftype="option" value="2">2.1 16bit/334kbps</li> <li ftype="option" value="3" selected="1">5.1 32bit/448kbps</li> </ul> </li> <li ftype="select" name="videoquality">Select Video Quality <ul> <li ftype="option" value="1" selected="1">DVD MPEG-2</li> <li ftype="option" value="2">DivX</li> <li ftype="option" value="3">XviD</li> </ul> </li> <li ftype="input" value="Some Comments" rows="3">Comments</li> </ul> </li> <li ftype="hidden" name="hidden_data" value="hiddeb_value"/> <li ftype="file" name="my_file">Schoose file</li> <li ftype="button" value="Submit"/> </ul>
Each LI tag can have “bind” attribute to define binding or “validate” attribute to define validation rule
item's of select-type can have “connector” attribute to load options
You can put elements inside elements of type checkbox or radio. In this case dhtmlxForm will define active state of nested elements depending on parent checkbox or radiobutton checked state. In other words, if checkbox is not checked, its nested elements will be not active and vice versa.
<item type="checkbox" name="def_prod" value="1" label="Definite Product"> <item type="input" name="product_nm" label="Product Name"/> </item> <item type="checkbox" name="all_prod" value="1" label="All Products"/>
With select element, you can associate some elements with selectbox options. In this case dhtmlxForm shows elements associated with selected option and hides others.
<item type="select" bind="country" label="Contry"> <option value="USA" text="USA"> <item type="radio" name="city" value="Washington" label="Washington" checked="1"/> <item type="radio" name="city" value="Chicago" label="Chicago"/> </option> <option value="Russia" text="Russia"> <item type="radio" name="city" value="Moscow" label="Moscow"/> <item type="radio" name="city" value="Sochi" label="Sochi"/> </option> <option value="UK" text="UK"> <item type="radio" name="city" value="London" label="London"/> <item type="radio" name="city" value="Manchester" label="Manchester"/> </option> </item>