DHTMLX Docs & Samples Explorer

Index
dhtmlxForm

# DhtmlxForm Initialization

There are 2 ways to initialize a dhtmlxForm object:

- From an existing form
- From a config file

Firstly, before init you should include related js and css 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 validation, saving/loading data abilities - use the following code:

    <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 file

Your config file may have one of the following formats:

- XML
- HTML
- JSON

In this section we will stint just in 'JSON' variant consideration.

In the beginning, specify an HTML container for your future form.

    <div id=" form_container" style="width:280px;height:250px;"></div>

In case of dhtmlxLayout 2.6 and older, you can use the attachObject() method of dhtmlxLayout to attach this HTML element with the form to a layout cell.
Then, set configuration:

    var formData = [
               {type: "radio", name: "paymenttype", value:"cash", label:"Cash", checked: true},
               {type: "radio", name: "currencytype", value: "dollar", label: "U. S. Dollars", checked: true},
    	   {type: "radio", name: "currencytype", value: "euro", label :"Euro"},
    ];

And after that, create a dhtmlxForm object:

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

For details - see the example.