Save data asynchronously php

Question

Today one of my client required that he need to save the form data to the server asynchronously when it CHANGES

ex :

i have a form for filling the user details ,including text box,select,radio,check etc...

so when i change a value in text box i need to save them back to server.

is there any libraries or something available on php that i can use ?

Please note i know what is ajax,but still i need to code so much manually,also i care re-usability. Thats why i am asking for a library.

Edit

I know jQuery,Js,Ajax etc ..but my idea is different ...

say that

<input type="text" class="dataBinder[name]" id="cname" name="name" />
<input type="checkbox" class="dataBinder[agree_me]" id="agree_me" name="agree_me" />

sure i can do

 $("#cname").event(function(){

 var is_changed = true; ///check for changes if any

if(is_changed)
{

//send to the server
}

});

BUT I AM SEARCHING FOR A LIBRARY THAT CAN DO THIS AUTOMATICALLY

ex:

//assume a library dataMapper

var myForm = $("#myForm"); //get the form

myForm.dataMapper({

"server" :"serverUrl/someFunc.php"
//may be some other kind of option too
});

someFunc.php on server

dataMapper DM = new dataMapper();

$changes = DM->get_data(); //a function that which give the changes

return $changes

the values is from dataBinder[name] from

<input type="text" class="dataBinder[name]" id="cname" name="name" />

var_dump($changes); gives

array(3) {
  ["changes"]=>
  array(2) {
    ["cname"]=>
    string(15) "my-changed-name"
    ["agree"]=>
    bool(false)
  }
  ["time"]=>
  string(6) "720124"
  ["form"]=>
  string(6) "formId"
}

I am sure there may be lot of questions about the developer ,but i am just searching if any because i dont want to reinvent the wheel.

Answer 1

Why not use a data-save-ajax attribute in every input element you need and add the ajax page as a value. Now you create one jQuery (or whatever ajax javascript you prefer) and write an on-change event handler that saves the values to the data-save-ajax link.

Something like this:

jQuery("[data-save-ajax]").change( function() {
    jQuery.ajax({
        url: jQuery(this).attr("data-save-ajax"),
        method: 'post',
        data: {
            newvalue: jQuery(this).val()
        }
    });
});

Things to consider is the load this will be generating. Best is to use an event handler when losing focus. Or if you prefer on-change, then perhaps a few milliseconds before starting to ajax the changes.

The data-save-ajax link will ofcourse be a php page that checks the session and saves the data to the database based on the url. You can use .htaccess (or other) rewriting to let your php know what input you are using.

For instance a data-save-ajax url of /ajax/text/name will be rewritten to /ajax/index.php .

I once wrote an ajax updater like this, it's easily built and you can update or re-use it easily anytime you have need of it.