jquery populate text input from table based on select value
Question
I have a form which contains a select named Client_ID as well as some other text inputs. What I need is that when a user selects a Client_ID, my fields Address1, Address 2 etc should be populated with the result of a database query along the lines of
SELECT Address1, Address2 from Client where Client_ID = Client_ID
I'm aware this is somewhat of a noob question, but would really appreciate some help on the simplest and best way to do this.
2 answers
solution1
2 ACCPTED 2010-09-07 09:11:01
You should do something like this with jQuery + JSON
First of all download jquery from here and include it in your application.
If home.php , your downloaded jquery file( jquery-1.4.2.min.js ) and getData.php are in the same folder then your home.php will be look like this:
home.php (file that contain your form)
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#Client_ID').live('change', function(event) {
$.ajax({
url : 'getData.php',
type : 'POST',
dataType: 'json',
data : $('#myform').serialize(),
success: function( data ) {
for(var id in data) {
$(id).val( data[id] );
}
}
});
});
});
</script>
</head>
<body>
<form id='myform'>
<select name='Client_ID' id='Client_ID'>
<option value=''>Select</option>
<option value='1'>Client 1</option>
<option value='2'>Client 2</option>
</select>
<input type='text' name='address1' id='address1'>
<input type='text' name='address2' id='address2'>
<select name='gender' id='gender'>
<option value=''>Select</option>
<option value='1'>Male</option>
<option value='2'>Female</option>
</select>
</form>
</body>
</html>
getData.php
<?php
$clientId = $_POST['Client_ID']; // Selected Client Id
$query = "SELECT Address1, Address2 from Client where Client_ID = $clientId";
$result = mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_ASSOC)
$add1 = $row[Address1];
$add2 = $row[Address2];
$gender = 1;
$arr = array( 'input#address1' => $add1, 'input#address2' => $add2, 'select#gender' => $gender );
echo json_encode( $arr );
?>
I have tested this code on my machine and it is working.
solution2
1 2010-09-07 08:57:53
Read this tutorial . I think it might help you understand the concept of moving data from client to the server and vise the versa.
Keep in mind that in your case you need to combine event.
$(document).ready(function(){
$("#my_select_box").change(function()
{
//send the data to the server as in the tutorial above
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.