如何使用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;