基于先前选择填充单个输入 - MYSQL PHP JS？

Question

I want to grab my customers phone number from a MYSQL database and auto populate it into an input box based on users selection of customers in a prior dropdown box.

I've managed to do this in the past when filling in larger amounts of data but what I've previously used seems like a lot of code to auto fill a single input box.

I know how to fill the customer phone based on the data passed from the prior page (although I've deleted that bit here) but I want that data to change dynamically as users use the dropdown.

There's got to be an easy way to do this but I'm a complete newb at js (and only barely proficient at PHP & MYSQL). Can anyone give me a hand?

My PHP/HTML:

$result = mysql_query("SELECT cust_id, name, phone FROM customers ORDER BY name ASC");
$customers = mysql_fetch_array($result);

<label for="customer">Customer:</label>
<select name="customer">
    <option value="0">Add New Customer</option>
        <? foreach ($customers as $customer): ?>
            <option value="<?=$customer['cust_id']?>" <?=($customer['cust_id'] == $parts['cust']) ? "selected" : ""?>><?=$customer['name']?></option>
        <? endforeach; ?>
</select>

<label for="custphone">Customer Phone:</label>
<input type="text" name="custphone" value="">

Let me know if you need anything else from me and thanks in advance for helping me out on this.

Answer 1

For this answer, I will use the jQuery syntax, jQuery is a free javascript library, and you'll certainly use it in the future, read more.
To resume, we'll use an event triggered by your select element, when his value is changed, we'll process an AJAX request with some parameters to a PHP page (ajax.php) which returns the phone number of the customer previously choosen.

First you need to include in your HTML web page, the jQuery script, with the <script> tag.

<script src="path/to/jquery.js"></script>

In a second time, we'll create a new javascript script (assuming you add some id's to your HTML elements):

<script type="text/javascript">
    $(document).ready(function(){ // When the document is ready
         $("select#customers").on("change",function(){ // We attach the event onchange to the select element
             var customer_id = this.value; // We retirve the customer's id
             $.ajax({
                 url : "path/to/ajax.php", // path to you php file which returns the phone number
                 method : "post", // We want a POST request 
                 data : "customer_id="+customer_id, // You'll retrieve this data in your $_POST variable in ajax.php : $_POST['customer_id']
                 success: function(response) { // The function to execute if the request is a -success-, response will be the customer phone number
                     $("input#custphone").value(response); // Fill the phone number input 
                 }
             });
         });
    });
</script>

Now, you've all the gear to continue, you should read about jQuery and AJAX. You just have to create the "ajax.php", retrieve your customer id with the $_POST variable, process the SQL query to retrieve the phone number, then, return it with an echo.