根据选择的下拉菜单自动填充，需要帮助

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... Eg:

<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>