Step 4. Save Data Changes on the Server

Now we need to provide a possibility to save changes made in the form on the server. We will save the changes after the user clicks the "Submit" button.

To load data from the server it was enough to use the dhtmlxConnector library. But if we want to perform different CRUD operations and save data changes back to the server, we need to use one more helper - the dhtmlxDataProcessor library.

1. Initialize dhtmlxDataProcessor and attach it to the form using the code as in:
   
   

   "index.html" file

   var mydp = new dataProcessor ("formdata.php");    //inits dataProcessor
   mydp.init(myform);//associates the dataProcessor instance with the form

2. Call the save() method for the "Submit" button to send the updated data to the server each time the user clicks this button:
   
   

   "index.html" file

   myform.attachEvent("onButtonClick", function(id){
       if (id=='button1'){
           myform.load('formdata.php?id=1')//loads data of the 1st customer (id=1)
       }
       else if (id=='button2'){
           myform.load('formdata.php?id=2')//loads data of the 2nd customer (id=2)
       }
       else if (id=='save'){        myform.save();// saves data to db     }});