DHTMLX Docs & Samples Explorer

dhtmlxForm initialization

Before init you should include corresponding css/js files:

    <link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="codebase/dhtmlxcommon.js"></script>
    <script src="codebase/dhtmlxform.js"></script>

Initialization from an existing form

If you have a ready form on the page and just need to add the ability to validate or save|load data you can use

	<form id="my_form">
		...
	</form>
    var dhxForm = new dhtmlXForm("my_form");

To have the really useful form you need to define bindings and provide server side connector

Initialization from a config

You need to have some HTML element to use as container for dhtmlxForm:

    <div id="dhxFormObj"></div>

Possible configuration formats are:

  • JSON
  • XML
  • HTML

JSON init

First you need to create an object with incoming data:

    var formData = [
        {type: "radio", name: "color", value: "r", label: "Red", checked: true},
        {type: "radio", name: "color", value: "g", label: "Green"},
        {type: "radio", name: "color", value: "b", label: "Blue"}
    ];

Then you need to create a new instance of dhtmlxForm:

    var dhxForm = new dhtmlXForm("dhxFormObj", formData);

Details of JSON configuration

HTML Init

You need to create an UL object with class name dhtmlxForm, and it will automatically replaced with dhtmlxForm according the struct:

    <ul class="dhtmlxForm">
        <li ftype="radio" name="color" value="r" checked="true">Red</li>
        <li ftype="radio" name="color" value="g">Green</li>
        <li ftype="radio" name="color" value="b">Blue</li>
    </ul>

Details of HTML configuration

XML init

First you need to create an XML file with dhtmlxForm data:

    <items>
        <item type="radio" name="color" value="r" checked="true" label="Red"/>
        <item type="radio" name="color" value="r" label="Green"/>
        <item type="radio" name="color" value="r" label="Blue"/>
    </items>

Details of XML configuration

The you need to init dhtmlxForm and load XML into it:

    var dhxForm = new dhtmlXForm("dhxFormObj"); 
    dhxForm.loadStruct("dhxForm.xml");

Loading from XML string also supported:

    var dhxForm = new dhtmlXForm("dhxFormObj"); 
    dhxForm.loadStructString('<items><item type="radio" name="color" ...');