Server 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

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

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 = mysql_connect("localhost","root","");
mysql_select_db("db_name");
 
$form = new FormConnector($conn);//create connector for dhtmlxForm using connection to mySQL server
$form->render_table("Users","user_id","f_name,l_name,email");//table name, id field name, fields to use to fill the form

1. Add dhtmlxdataprocessor.js file to your page (it can be found either in dhtmlxConnector codebase directory)
2. Instantiate DataProcessor (pass server side file url where you use dhtmlxConnector as argument)
3. Connect form to DataProcessor
4. Use load(…) and save() methods of dhtmlxForm to fill form with data and save data back to server
5. Use names for form fields the same as corresponded database table fields names (or aliases if were used)

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

Note: Client side dhtmlxForm validation will run automatically when 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"} 
]

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.

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(url) 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 send(url) method is called. If it fails, data will not be sent to server.

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 form fields 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>