DHTMLX Docs & Samples Explorer

Index
dhtmlxForm

# Server Integration

DhtmlxForm can be filled with data through dhtmlxConnector.
All you need is to create data feed file (see sample below) and bind form fields to database fields.

    require_once('form_connector.php');
      //$conn - database connection, result of mysql_connect
    $form = new FormConnector($conn);
    $form->render_table("packages_plain","Id","Package,Version,Size,Maintainer");

Corresponding form elements on client-side should have 'bind' attributes with the same names as parameters returned by connector:

    <form action="" method="post" accept-charset="utf-8" id="my_form">
      <div>
         Package: <input bind="Package" type="text" name="package" value="">
      </div>
      <div>
         Version: <input bind="Version" type="text" name="version" value="">
      </div>
      <div>
         Package size: <input bind="Size" type="text" name="size" value="">
      </div>
      <div>
         Maintainer: <input bind="Maintainer" type="text" name="maint" value="">
      </div>
    </form>

Initilization of the form should involve the second parameter of the constructor - url of the data feed file. Data is loaded passing record 'ID' through the load() method:

    var myForm = new dhtmlXForm("my_form");
    myForm.load("data.php?id=1631");

To save or delete data - use the save() and remove() methods. No any extra code on server-side is necessary.

## Custom data feed

Instead of connector, you can load data from any custom feed:

    var myForm = new dhtmlXForm("my_form");
    myForm.load("custom.xml");

custom.xml file:

    <data>
      <Package>acx100-source</Package>
      <Version>20080210-1.1</Version>
      <Size>229468</Size>
      <Maintainer>Stefano Canepa</Maintainer>
    </data>

The name of the top tag is mandatory, child tags must have the same names as names of data-binds.

## Data saving by custom code

Value of dhtmlXForm can be sent to a server-side by post request, the same as for normal form. You can use one of the next approaches for this purpose:

1. Including dhtmlxForm in a normal form tag. Submitted form will include all data from inside dhtmlxForm.
2. Trigger data sending using the send(url) method. All data of form fields will be sent to the target url by AJAX request.

    myform.send("custom.php");

## Data saving by dataProcessor

As for other dhtmlx components, you can use DataProcessor for dhtmlxForm.

Assuming that you have 'data.php' file as described above, you can use the next js code to attach form to the dataProcessor.

    var dp = new dataProcessor("data.php");
    dp.init(myForm);

Now, to save form you can use:

    myForm.save();

Form data will be sent to data feed , where it will be automatically saved ( updated, if it was previously loaded from the same feed, or inserted if it was a new data )

## Difference between 'save' and 'send' methods

Both methods sends form data to the server-side , but

- “send” - sends data in a default 'http' format
- “send” - doesn't expect any special response
- “save” - sends data in format of dataProcessor
- “save” - expects valid XML response
- “save” - will work only if you have dataProccesor attached to the form

In case of dhtmlxConnector, to save or delete data you can use the save() and remove() methods.
In usual cases no extra code on server-side is required in addition to what was shown above. For more details about dhtmlxConnector see respective part of the documentation.