选择下拉选项后自动填充文本框的功能实现求助

我来帮你搞定这个问题，你的核心问题出在AJAX成功回调里对文本框的赋值逻辑上，另外还有几个小细节需要调整：

问题分析 #

1. 文本框赋值逻辑错误：你之前的代码沿用了下拉框的操作逻辑（append+复杂选择器），但文本框只需要直接设置val()就能完成赋值。
2. 冗余的ID获取：你的option已经把customerID设为value属性了，完全不需要再通过attr("id")获取，直接用$(this).val()更简洁。
3. 表单输入类型错误：HTML里没有type="int"这个类型，应该用type="number"来匹配数字输入场景。
4. SQL注入风险：你的PHP代码直接把POST参数拼接进SQL语句，这是非常危险的操作，必须改成预处理语句来规避风险。

修正后的完整代码 #

1. 修正表单代码 #

<form name="inserform" method="POST">
    <label>Existing Customer Name : </label>
    <select name="existCustName" id="existCustName">
        <option value="">None</option>
        <?php 
        $custName = $conn->query("SELECT * FROM customers"); 
        while ($row = $custName->fetch_assoc()) { 
        ?>
            <option value="<?php echo $row['customerID']; ?>"><?php echo $row['customerName']; ?></option>
        <?php } ?>
    </select><br>
    <label>Current Bottle Balance : </label>
    <!-- 改成number类型，可加readonly防止手动修改 -->
    <input type="number" id="currentBal" name="currentBal" readonly><br>
    <input name="insert" type="submit" value="INSERT">
</form>

2. 修正AJAX脚本 #

<script type="text/javascript">
$(document).on("change", '#existCustName', function(e) {
    var existCustID = $(this).val();
    // 如果选了None，清空文本框
    if (!existCustID) {
        $("#currentBal").val('');
        return;
    }
    $.ajax({
        type: "POST",
        data: {existCustID: existCustID},
        url: 'existingcustomerlist.php',
        dataType: 'json',
        success: function(json) {
            // 因为查询的是单个客户，直接取第一个结果的余额
            if (json.length > 0) {
                $("#currentBal").val(json[0].currentBal);
            } else {
                $("#currentBal").val('');
            }
        },
        // 增加错误处理，避免异常情况无提示
        error: function() {
            $("#currentBal").val('加载余额失败');
        }
    });
});
</script>

3. 修正PHP代码（解决SQL注入） #

<?php
include 'config/config.php';

// 先检查参数是否合法
if (!isset($_POST['existCustID']) || empty($_POST['existCustID'])) {
    header('Content-Type: application/json');
    echo json_encode([]);
    exit;
}

// 使用预处理语句彻底规避SQL注入
$stmt = $conn->prepare("SELECT currentBal FROM customers WHERE customerID = ?");
// 绑定参数，"i"表示参数为整数类型
$stmt->bind_param("i", $_POST['existCustID']);
$stmt->execute();
$result = $stmt->get_result();

$results = [];
if ($row = $result->fetch_assoc()) {
    $results[] = $row;
}

header('Content-Type: application/json');
echo json_encode($results);
// 关闭语句和连接，释放资源
$stmt->close();
$conn->close();
?>

改动说明 #

• 文本框直接用val()赋值，抛弃了原来错误的下拉框操作逻辑；
• 利用select的value属性直接获取客户ID，去掉了冗余的option id属性；
• 预处理语句彻底解决了SQL注入的安全隐患，这是生产环境必须注意的点；
• 增加了空值判断和错误处理，让页面逻辑更健壮，用户体验更好。

内容的提问来源于stack exchange，提问作者Richmond