DHTMLX Docs & Samples Explorer

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:

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.