Question

I have the following problem. I got two forms on my web page. On the first form can I select a users whit a select box. When I have selected the users in the form, I will send it to the another form on the same web page. How can I be sure that the first page does not reload when i post the form? It is not intended that when I enter some data and a user wants to add the data that I entered are gone by reloading the page by post. I know this can be done with jquery, but I have no idea how this goes.

Thanks

Answer 1

You can achieve this by using jQuery.ajax() function.

jQuery('#firstForm').live('submit',function(event) {
    $.ajax({
        url: 'GetUserInfo.php', // script to return user info in json format
        type: 'POST',
        dataType: 'json',
        data: $('#firstForm').serialize(),
        success: function( data ) {
            for(var id in data) {
                jQuery('secondForm#' + id).val(data[id]); // loop json data to populate each field of second form
            }
        }
    });
    return false;
});

GetUserInfo.php

• Get user’s name from $_POST variable
• Get User information from database.
• Create an array of user info such that index of each value should represent id of a second form field.

For Example:

$userInfo = array( 'FirstName' => 'abc', 'LastName' => 'xyz', 'DOB' => '01/01/2000');

Here FirstName, LastName and DOB are the IDs of form elements in second form

• echo you data into json format:

echo json_encode( $userInfo );