Server-side Integration

To fill dhtmlxForm with data using datasource fields binding. There are two ways of doing this:

Automatically, using dhtmlxConnector
Using your own (custom) datasource

To save data back to server, you can use:

Automatic saving using dhtmlxConnector
Send data to server using AJAX request and save it there using your own processor

Automatic integration using dhtmlxConnector

dhtmlxConnector allows binding dhtmlxForm fields to server side datasource with minimal efforts. For details see the dhtmlxConnector documentation, here we'll show you the basics.
To use dhtmlxConnector you need to follow a few steps on client side and create server side file.

Server side

Here is the code sample (PHP) you could use to connect the form with "Users" table on server side.

require_once('form_connector.php');
$conn = new PDO("mysql:dbname=db_name;host=localhost","root","");
 
//create connector for dhtmlxForm using connection to mySQL server
$form = new FormConnector($conn);
//table name, id field name, fields to use to fill the form
$form->render_table("Users","user_id","f_name,l_name,email");

Client side

Instantiate DataProcessor (pass server side file url where you use dhtmlxConnector as argument)
Connect form to DataProcessor
Use the load() and save() methods of dhtmlxForm to fill form with data and save data back to server
Use names for form fields the same as corresponded database table fields names (or aliases if were used)

  var myForm = new dhtmlxForm(containerID,structureAr);//create form(structure below)
  var dp = new dataProcessor("php/user_details.php");//instatiate dataprocessor
  dp.init(yourFormObject);//link form to dataprocessor
  ...
  //fill form with data.Where userID is ID or record you want to use to fill the form
  myForm.load("php/user_details.php?id="+userID);
  ...
  //create event handler to save data on button click
  myForm.attachEvent("onButtonClick",function(buttonID){
    if(buttonID=="my_button"){
        myForm.save();//no params needed.It uses url that you passed to dataprocessor
    }
  })
</script>

Note: Client side dhtmlxForm validation will run automatically when the save() method is called. If it fails, data will not be sent to server.

Form elements on client-side should have 'name' attributes with the same names as corresponded database table fields names (or aliases) returned by connector (see above):

var structureAr = [
    {type: "input", name: "f_name", label:"First name"}, 
    {type:"input", name: "l_name", label:"Last Name"},
    {type:"input", name:"email", label:"Email"},    
    {type:"button", name:"my_button", value:"Save"} 
];

Filling the form with custom data feed

Instead of dhtmlxConnector, you can load data from any custom feed using the same load() method. The requirement is: feed elements should have the same names as corresponded form fields have.

var myForm = new dhtmlXForm(containderID,structureAr);
myForm.load("user.xml");

user.xml file:

<data>
  <f_name>John</f_name>
  <l_name>Doe</l_name>
  <email>jdoe@mail.com</email>
</data>

The name of the top tag in XML - <data> - can be any.

Saving data without dhtmlxConnector

AJAX Requests

In case you would like to have your own server-side processor for form data and don't apply dhtmlxConnector, you may use the send() method and send form data to the server by AJAX POST/GET request. By default, POST request is used.

myForm.attachEvent("onButtonClick",function(id){
    if(id=="send_button"){
        myForm.send("php/save_form.php", "get", function(loader, response){
            alert(response);
        });
    }
});

Note: Client side dhtmlxForm validation will run automatically when the send() method is called. If it fails, data will not be sent to server.

HTML Form Submit

Also, you can wrap dhtmlxForm container with HTML form tags and use HTML form submit to send data to server in common way. Just do not forget to run dhtmlxForm validation first.

<form action="php/save_form.php" method="post" target="[some target]">
    <div id="form_container"></div>
</form>
 
<script>
myForm = new dhtmlXForm("form_container",structureAr);
myForm.attachEvent("onButtonClick",function(id){
    if(id=="my_button"){
        if(myForm.validate())
            document.forms[0].submit()
    }
})
</script>