Update text boxes with data from mysql db using a select

[scrupply]

I am trying to update a series of text boxes based on the option chosen. For example: I want to submit a request for person B and when I choose person B from the drop-down the text fields Name and email are then filled using a DB. If I then choose person C the information changes to person C from the DB. I believe that this can only be accomplished using JavaScript but I am unsure how. I am using PHP and MySQL as the backend.

Thank you

[coopster]

If the data set is small enough I would deliver the payload along with the rest of the page content during the initial request and use JavaScript to update the values without an additional round trip to the server. However, if you do indeed want to retrieve the data "on-the-fly" you may use AJAX, which is an asynchronous request.

[scrupply]

So how would I do this using jQuery? I am pulling the data but if I want to change it without refreshing the page than it needs to be through some sort of AJAX method. I know that jQuery or something else can do it, I just do not know how to do it.

[coopster]

There are examples on the jQuery Ajax [api.jquery.com] documentation. The site also has tutorials that you may want to read/watch.

[scrupply]

Unfortunately the tutorials do not go to this level. I have searched high and low for this data but nothing yet. Can someone help me? I do have most of the code if that would help.

[coopster]

Unfortunately the tutorials do not go to this level.

What level?

[webfoo]

This code probably wont work, because I don't think that <option> has an onClick event. But this is the concept at least.

UNTESTED:

<script type="text/javascript">
function loadUser(name,email) {
document.getElementById("name").value=name;
document.getElementById("email").value=email;
}
</script>
<form action="action.php" method="POST">

<select name="person">
<?php
$result=mysql_query("SELECT * FROM persons");
while($row=mysql_fetch_array($result)) {

$personName=$row['name'];
$personEmail=$row['email'];

echo "<option value='$personName' onClick=\"loadUser('$personName','$personEmail');\">$personName</option>";

}
?>
</select>

<input type="text" id="name" name="name" placeholder="name" />
<input type="email" id="email" name="email" placeholder="email" />
</form>

[rocknbil]

That would work, and makes a strong point, only use Ajax/JS if there is no other way - outputting it right where you need it is a very good way.

I would do it on change of the select, not click of the option. What if they don't click? (For example, a state list, tab focus to it, type "ca" and it will select California.) I'd also just go ahead and delimit the two values so you could make all your JS external.

<script type="text/javascript"> 
window.onload=function() { attachBehaviors(); }; 
// 
function attachBehaviors() { 
 document.getElementById('person').onchange=function() { 
 loadUser(this.options[this.selectedIndex].value); // <-- check this, may be incorrect 
 } 
} 
function loadUser(optionvalue) { 
 // Always set a default 
 if (optionvalue=='') {  
 // You could alert here but it may just be annoying 
 //alert('Please select a value');  
 return; // Do nothing if blank 
 } 
 opts = optionvalue.split(':'); 
 var name = opts[0]; 
 var email = opts[1]; 
 document.getElementById('name').value=name; 
 document.getElementById('email').value=email; 
} 
</script> 
<form action="action.php" method="POST"> 
<select name="person" id="person"> 
<option value="">Select</option> 
<?php 
$result=mysql_query("SELECT * FROM persons"); 
while($row=mysql_fetch_array($result)) { 
 $personName=$row['name']; 
 $personEmail=$row['email']; 
 echo "<option value=\"$personName:$personEmail\">$personName</option>\n"; 
} 
?> 
</select> 
<input type="text" id="name" name="name" placeholder="name" /> 
<input type="email" id="email" name="email" placeholder="email" /> 
</form>