AJAX function to populate textfields based on dropdown list

Question

I have not done much on Ajax before and was wondering if I could do this using jQuery.

This is what I have at the moment:

• Database table 'airports' - this contains id, name, town, postcode
• Dropdown list with Airport names (the entries are generated from the database)
• 3 form fields (name, town, post code)

I want to be able to select an airport from the drop down list and the address fields need to be populated with the corresponding data.

Can someone give me some guidance on how I go about doing this?

Answer 1

what you need to do is after the user choose an airport

you take that airport value. make an ajax call to the server which then runs a select on your db where id = yourValue

then lets say you get a datatable. you insert the values into an object named airport which has all the properties you need.. then the response of your server to the client will be a json string that you serizlize from your airport object.

and then all you have to do is use the properties in the json object to fill those textboxes..

Answer 2

jQuery can be used to listen on the select event in the dropdown, fetch the information through a request and fill the fields. On the serverside the right information should be returned in a nice format like JSON.

$('select').change(function(){
 $.ajax({
   type: "POST",
   url: "some.php",
   data: {id: this.find(':selected').val()},
   dataType: json,
   success: function(data){
    //fill the fields
   }
 });
});

I didn't check this so don't copy paste it. It is just for illustration.

http://api.jquery.com/category/ajax/