get selected value from a select and update a div

[dourvas]

hallo there. My english arent quite good so excuse me in advance

i have a form. This form contains a select and some textareas. i get data from a database to fill in the select. This is the code:

echo "<form method=post name=f1 action='bathmoi-ins.php'>";
$quer=mysql_query("SELECT member_id, lastname, firstname, fathersname FROM members where tmima='$cat' order by lastname"); 

echo "<p  align='center'><font size='2' face='verdana'>choose the student:";
echo "<br><br>";
echo "<select name='subcat' size='20'>";
while($noticia = mysql_fetch_array($quer)) { 
echo  "<option value='$noticia[member_id]'>$noticia[lastname], $noticia[firstname], $noticia[fathersname] </option>";
}
echo "</select>";
....

The concept is to choose a student from the select (on change) and get the selection value in order to show the students photograph (into a div or not). (i must get the selected value in order to communicate with the database to get the photo s url)

Be aware that i dont want to sudmit the form. The form on sudmition inserts into the same database data the user inserted into the textareas i mentioned.

i am not sure what i should do. i know that i have to call a javascript?? function on change. But how in that function can i communicate with the database in order to get the photos url in order to show that photo. If you can think of another way to accomplish something like that please inform me....

[blocblue]

You're correct that you need to use JavaScript to capture the change event on the select element.

You then need to use AJAX to send an asynchronous request to the server for information.

I would suggest using a JavaScript framework to do the heavy lifting for you. My JavaScript framework of choice is jQuery, but yours may be different.

[dourvas]

i would appreciate a code example because all this are a lot of info for me (i ve never use it) so i can start looking for more specific information

[blocblue]

Okay, taking jQuery as the chosen JS library, read up about Events.

The following example will bind a listener to the change event on the sub category select field, running the JS function whenever the value changes.

$('select[name=subcat]').bind('change', function() {
    // Code within this function will be run whenever the sub category select field value changes
});

You then need to read up about the Ajax method. This includes various source code examples.

Once you've had a read, feel free to come back with specific questions and we'll try to help.