How to load multiple fields to form from database with jquery?

Question

Hello. In my web-application i have a form which contains about 25 fields. Users will create this form and form fields value will transfer to database tables. But i also need an editing function for this form. People will push button, form will load and i need form fields values to load from database. I know that i can load data to form field with jquery load function:

$('#text_field').load('text_field_value.php');

But when i have 25 fields, then i need to do 25 connections to database (1 connection per file), so my form loading very slow.

Is there any solution, to speed up the process?

Thanks in advance.

Answer 1

Perhaps you should load the field values using one ajax request so that you are only using one connection to the database and then as Pekka said return a JSON Array. Then using jQuery go through the JSON Array putting the values into the correct fields.

So use .getJSON/.post/.ajax instead of .load

EDIT: Example JSON Array, with objects for each field

[
    {
        'field'      : '#field1',
        'fieldType'  : ':text',
        'fieldValue' : 'Test Value'
    },
    {
        'field'      : '[name=field2]',
        'fieldType'  : ':radio',
        'fieldValue' : '#item1'
    },
    {
        'field'      : '#field3',
        'fieldType'  : 'select',
        'fieldValue' : 5
    },
    {
        'field'      : '#field4',
        'fieldType'  : ':checkbox',
        'fieldValue' : true
    }
]

You can then loop through the array as follows:

for(i in array)
{
    /***
     * access each object as follows:
     * array[i].field
     */
    .....
}