创建下拉列表，使用选择从数据库自动填充

Question

I am programming a insurance form: you select the company you have, then it will access the phone number and other values from the database and fill in the form below. Then they just need to enter in their info that's required.

$hostname = "";
$username = "";
$password = "";
$database = "";

mysql_connect($hostname,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

//getFN();
function getFN()
{
    $query = "SELECT first FROM contacts";
    $FNresult = mysql_query($query); 


    $dropdown = "<select name='contacts'>";

    while( $row = mysql_fetch_assoc($FNresult) )
    {
        $dropdown .= "
<option value='{$row['first']}'>{$row['first']}</option>";
        echo getLN();
        //$last .="
<option value='{$row['last']}'>{$row['last']}</option>";
        //echo $last;
    }

    $dropdown .= "
</select>";

    echo $dropdown;
}

// Get last name
function getLN()
{
    $query = "SELECT last FROM contacts";
    $LNresult=mysql_query($query);

    $last;
    while($row = mysql_fetch_assoc($LNresult))
    {
        $last = "{$row['last']}";
    }
    echo $last;
} //end getLN


mysql_close();
?>

<select name="fdsfd" onchange="document.getElementById('first').value = this.value">
    <!-- <option value="<?//php echo $first; ?>"></option>-->
</select>

<form action="insert.php" method="post">
    First Name: <input type="text" id="first" value=""><br>
    Last Name: <input type="text" id="last"><br>
    Phone: <input type="text" id="phone"><br>
    Mobile: <input type="text" id="mobile"><br>
    Fax: <input type="text" id="fax"><br>
    E-mail: <input type="text" id="email"><br>
    Web: <input type="text" id="web"><br>
    <input type="Submit">
</form>

Answer 1

You'll need to use a combination of AJAX and PHP, and modify the page source dynamically, based on the response from the server (DHTML).

First, you'll need an understanding of AJAX: SO question on how AJAX works

Second, you'll need an understanding of jQuery: tutorial here

NOW THEN,

You'll need a way for javascript to uniquely identify your element. Give it an id attribute, as well as the name you have given it.

Once an element has an id attribute, jQuery can access it using the ID selector

$("#[id]")...

Your background script should take a unique identifier from your dropdown, get the data from your database and populate a JSON-encoded array.

Then you can populate the form elements.

<?php
// background script

// retrieve data based on $_POST variable, set to $returnArray

/****************************
 * the structure of returnArray should look something like
 *     array(
 *         'first' => firstName,
 *         'last' => lastName,
 *         etc.
 *     )
 */

echo json_encode($returnArray);

=========================

<!-- javascript on client-side -->
<script language="javascript" type="text/javascript">
    $("#dropdown").on('change', function() {
        $.post("backgroundScript.php", {
                uid: $(this).val()
            } function(data) {
               $("#first").val(data.first);
               $("#last").val(data.last);
               // etc.
            }, 'json'
        );
    });
</script>