Best way to track database table/column for html form control

Question

I am working on a php program that requires javascript on every form control. Once the onblur event takes place the value will automatically be sent to the server to update the database.

I have possibly 50 form controls spread over 5 tabs so I don't want to hardcode the information on the php file.

I could co-opt an idea from HTML5 and create new properties for this such as

data-table='user' data-column='firstname'

for every item, and then javascript could pull those values out and send them to the php file.

I don't know if there is a better way to manage the mapping between these form controls and the several tables/columns?

Answer 1

Hi,

Actually I think that's the best option you have. If you use jquery, you can do something like this :

$("input").blur(function () {
    var data-table = $(this).attr('data-table');
    var data-column = $(this).attr('data-column');

    $.ajax({
    type: 'post',
    url: your_url,
    data: your_get_data
    });
});

Answer 2

HTML

<input id='data-base*data-colum' onblur='preupdate(this);' value='' />

Javascript

function preupdate(el){
   var idData = el.getAttribute('id').split('*');
   var dataBase = idData[0];
   var dataColum = idData[1];

   update(el.value, dataBase, dataColum);
}

Answer 3

I'd use PHP to generate a data structure mapping the controls (hopefully they have unique names/ids) to the db info. Then I'd spit this out in JSON as inline javascript in .

Then your on_blur attributes on all your fields can be the same (or each pass a unique id for that field) and call a javascript function that looks up the db info from the data structure.