如何使用Ajax根據另一個文本框的值填充表單輸入文本框

Question

我正在學習php，html和ajax。 我已經建立了一個包含員工信息的MySQL數據庫。 我設法弄清楚了如何使用Ajax自動填充文本框（稱為“員工詳細信息”）。 當您開始輸入員工的姓名時，它將由他們的全名和公司名稱組成。

我現在想要做的是根據第一個文本框的值自動用其員工ID填充第二個文本框。

我搜索了很多問題和教程，但是找不到關於如何執行此操作的簡單說明，我發現的示例完全沒有包括php，ajax，html，而且我不知道該怎么做全部結合在一起（我不是編碼天才，我無法使用任何示例）。 我已經在這個問題上停留了幾個小時，失去了生存的意願！

如果有人可以在一個地方提供一個簡單的解釋，例如php，ajax和html的示例，那么我將不勝感激！

到目前為止，這是我的代碼。

form.php

<link rel="stylesheet"        href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(function() {
    $( "#employeedetails" ).autocomplete({
        source: 'search.php'
    });
});
</script>

<div class="form-group">
<b class="text-primary">Employee details:</b>
<input type="text" class="form-control" value="" id="employeedetails" name="employeedetails" required>

<b class="text-primary">Id:</b>
<input type="text" name="employeeid" id="employeeid" placeholder="employeeid"/>
</div>

search.php

include 'dbconnect.php';

    //get search term
    $searchTerm = $_GET['term'];

    //get matched data from employee table
    $query = $conn->query("SELECT * 
                         FROM employees 
                         WHERE (firstname LIKE '%".$searchTerm."%')
                            OR (surname LIKE '%".$searchTerm."%')
                            OR (companyname LIKE '%".$searchTerm."%')
                         ORDER BY firstname ASC

                        ");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['firstname'] . " " . $row['surname'] . " - " .     

    }

    //return json data
    echo json_encode($data);
?>

Answer 1

假設您的HTML員工詳細信息文本框具有id =“ employeeDetail”，而您的HTML員工ID文本框具有id =“ employeeId”，則您可以使用jQuery來監聽對員工詳細信息的選擇，然后通過Ajax發送該選擇，並使用Ajax響應更新您的員工ID文本框的值。 這將涉及以下jQuery和PHP代碼：

jQuery代碼：

    $(document).ready(function(){
        $(#employeeDetail).on("change", function(){ //use an appropriate event handler here
             $.ajax({
                 method: "POST",
                 url: "getEmployeeId.php",
                 data: {
                    employee_detail: $("#employeeDetail").val(),
                 },
                 success: function(response){
                    if (response == "FALSE") {
                        var message = "ERROR: something went wrong on the MYSQL side";
                        alert(message);
                    } else {
                        $("#employeeId").val(response);
                    }
                 },
                 error: function(jqXHR, textStatus, errorThrown){
                    var message: "ERROR: something went wrong with the AJAX call - " + textStatus + " - " + errorThrown;
                    alert(message);
                 }
              });
         });
    });

PHP代碼（getEmployeeId.php）：

    //set $server, $user, $password and $database_name, then establish the connection:
    $conn = new mysqli($server, $user, $password, $database_name);
    if ($conn->connect_error) {
        exit("FALSE");
    }
    //get employee detail from POST (sent via AJAX):
    $employee_detail = $_POST["employee_detail"];
    //here, you should test whether employee_detail matches what you expect
    //here, split $employee_detail into $first_name, $last_name and $company_name
    //now you are ready to send the MYSQL query:
    $sql = 'SELECT employeeid FROM tablename WHERE firstname = "$first_name" AND surname = "$last_name" AND companyname = "$company_name"';
    //since you expect a single matching result, you can test for num_rows == 1:
    if ((! $result = $_conn->query($sql)) || ($result->num_rows !== 1)) {
        exit("FALSE");
    } else {
        while ($row = $result->fetch_assoc()) {
            $employee_id = $row['id'];
        }
    }
    //now send $employee_id back to the AJAX call:
    echo $employee_id;