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

Question

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.

You could fetch all the values for the row as a JSON array for example? — Pekka
– Pekka, Commented Aug 31, 2010 at 9:34
i found easier solution: I just create a 1 database connection in form file and put values to form fields and then load this form to the user. So, no load, no getJSON, no .post, no .ajax. Very simple. Why i don't think about it earlier? — dsplatonov
– dsplatonov, Commented Aug 31, 2010 at 18:00

Nalum · Accepted Answer · 2010-08-31 15:41:18Z

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
     */
    .....
}

edited Aug 31, 2010 at 15:41

answered Aug 31, 2010 at 11:54

Nalum

4,2335 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dsplatonov Over a year ago

can i put all info to standard array, not json?

Nalum Over a year ago

If you want to interact with the array I think you would need to return a JSON array. I'll add an example of how I would make the JSON array.

dsplatonov Over a year ago

i'm not familiar with json requests. Can you add a .getJSON for that example? Thank you

Nalum Over a year ago

I'm a bit busy at the moment but will add an example when I get the chance.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related