Auto populate based on dropdown selected, need help - php

Question

How can I auto populate the data from db by dropdown selected?
and my dropdown result already appear as well, the code as following:
<?php
echo '<tr>
<td>'.$customer.'</td>
<td><select name="customer_id">';
foreach ($customers as $customer) {
if ($customer['customer_id'] == $customer_id) {
echo '<option value="'.$customer['customer_id'].'" selected="selected">'.$customer['name'].'</option>';
} else {
echo '<option value="'.$customer['customer_id'].'">'.$customer['name'].'</option>';
}
}
echo '</select>
</td>
</tr>';
?>
and the result of dropdown above listed as
admin
customer1
FREE
loaded from following db
INSERT INTO `my_customer` (`customer_id`, `name`, `firstname`, `lastname`) VALUES
(8, 'admin', '', ''),
(6, 'customer1', 'ok', ''),
(7, 'FREE', 'marj', 'om');
so whenever dropdown selected i want the all data below:
<tr>
<td><?php echo $firstname; ?></td>
<td><?php echo $lastname; ?></td>
</tr>
also auto populate, it seem need javascript/ajax/jquery to fixed it, I was Wondering if someone could help me, and thanks in advance
Addtion JSON CALL
I have the json call already as following:
(let say this placed at customer.php with url index.php?p=page/customer)
public function customers() {
$this->load->model('account/customer');
if (isset($this->request->get['customer_id'])) {
$customer_id = $this->request->get['customer_id'];
} else {
$customer_id = 0;
}
$customer_data = array();
$results = $this->account_customer->getCustomer($customer_id);
foreach ($results as $result) {
$customer_data[] = array(
'customer_id' => $result['customer_id'],
'name' => $result['name'],
'firstname' => $result['firstname'],
'lastname' => $result['lastname']
);
}
$this->load->library('json');
$this->response->setOutput(Json::encode($customer_data));
}
and the db
public function getCustomer($customer_id) {
$query = $this->db->query("SELECT DISTINCT * FROM " . DB_PREFIX . "customer WHERE customer_id = '" . (int)$customer_id . "'");
return $query->row;
}

Answer 1

Suppose You are using jQuery, You will listen to select change event and then do an ajax call for PHP function that will return the data. The data will then be outputed to the appropriate places. I advise to set id attributes for next tags: <select>, <td> for name, <td> for surname, like so:
<select name="customer_id" id="customer_id>...</select>
<td id="firstname"> echo firstname </td>
<td id="lastname"> echo lastname </td>
Then the jquery code:
<script type="text/javascript">//<!--
$(document).ready(function(){
$('select#customer_id').change(function(){
$.post(
"http://www.domain.com/my_php_script.php",
{customer_id: $(this).val()},
function(data){
$('td#firstname').html(data.firstname);
$('td#lastname').html(data.lastname);
}
);
});
});
//--></script>
Supposing that Your my_php_script.php retrieves the data from database by given customer_id in $_POST['customer_id'] and returns a JSON object like echo json_encode(array('firstname' => FIRSTNAME_FROM_QUERY, 'lastname' => LASTNAME_FROM_QUERY));
ADDITION:
There are two options how to solve it - in JS instead of
$.post()
You have to use
$.get(...)
OR in Your PHP script instead of
$this->request->get['customer_id']
You have to use
$this->request->post['customer_id']
at every place... This should do it...
E.g.:
<script type="text/javascript">//<!--
$(document).ready(function(){
$('select#customer_id').change(function(){
$.get(
"http://www.domain.com/my_php_script.php",
{customer_id: $(this).val()},
function(data){
$('td#firstname').html(data.firstname);
$('td#lastname').html(data.lastname);
}
);
});
});
//--></script>