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.
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.
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:
myform.send("custom.php");
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 )
Both methods sends form data to the server-side , but
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.