Step 10. Save Data From the Form

Now we need to provide the functionality for saving changes made in the data through the form. We will save the changes after the user clicks the "Submit" button.

To provide the functionality we will use one more helper - dhtmlxDataProcessor. The helper can be used with any DHTMLX data component to provide the 'communication' with the server side. It monitors all data changes and sends data to the server for the update/delete/insert operations.

As a result, to update the data in the database on clicking the "Submit" button, we need to initialize dhtmlxDataProcessor and attach it to the grid.

To save data changes on the server:

Initialize dhtmlxDataProcessor and attach it to the grid using the code as in:

'index.html' file

var dpg = new dataProcessor("data/contacts.php");         //inits dataProcessor
dpg.init(contactsGrid);   //associates the dataProcessor instance with the grid

Attach a handler function to the onButtonClick event to send the updated data to the server each time the user clicks the "Submit" button:

'index.html'

contactForm.attachEvent("onButtonClick", function(name){
    contactForm.save();     //sends the values of the updated row to the server
 });