模态框选中客户数据无法填充至主页面输入框问题求助

核心问题1：重复ID导致DOM元素选择错误 #

模态框内的隐藏输入框和主页面的可见输入框使用了完全相同的ID（customerName、customerEmail），浏览器通过getElementById查询时，只会返回页面中第一个出现的匹配元素（也就是模态框里的隐藏框）。你当前的赋值操作其实是修改了模态框内的隐藏框，而非主页面的可见输入框。

修复：给模态框内的元素添加唯一ID #

修改模态框里的隐藏输入框ID，比如加上modal_前缀区分：

<!-- 模态框内的隐藏输入框，更新ID -->
<input type="hidden" name="customer_Name" value="John Doe" id="modal_customerName">
<input type="hidden" name="customer_Email" value="my@emailtest.com" id="modal_customerEmail">

核心问题2：选中客户后未更新模态框内的隐藏值 #

当前show_customer_selected函数只更新了show_details的展示内容，但没有同步更新模态框内隐藏输入框的值，导致提交时拿到的还是初始默认值，不是选中客户的真实数据。

修复：在AJAX回调中更新隐藏框的值 #

推荐方案：后端返回JSON格式数据（更稳定）

修改ajax_customer_details.php，让它返回结构化的JSON数据，比如：

{
  "name": "John Doe",
  "email": "my@emailtest.com",
  "address": "109 here st Drive\nAuston, Texas\nUSA",
  "phone": "555-555-55555"
}

然后更新前端JS逻辑：

function show_customer_selected(){
    var customerDropDown = document.getElementById("customer_select");
    var customers_id = customerDropDown.value;
    $.ajax({
        url: "ajax_customer_details.php",
        method: "post",
        data: {customers_id},
        dataType: "json",
        success: function (result) {
            // 拼接详情HTML并展示
            var detailsHtml = `<br>${result.name}<br>${result.email}<br>${result.address}<br>${result.phone}`;
            $("#show_details").html(detailsHtml);
            // 更新模态框内的隐藏输入框值
            document.getElementById("modal_customerName").value = result.name;
            document.getElementById("modal_customerEmail").value = result.email;
        },
        error: function(xhr, status, error) {
            console.error("获取客户详情失败:", error);
        }
    });
}

临时方案：从返回的HTML中提取数据（不推荐，易出错）

如果暂时无法修改后端，可从返回的HTML字符串中提取信息：

success: function (result) {
    $("#show_details").html(result);
    // 从展示的详情中拆分出姓名和邮箱
    var detailsLines = document.getElementById("show_details").innerHTML.split("<br>").filter(line => line.trim());
    var customerName = detailsLines[0].trim();
    var customerEmail = detailsLines[1].trim();
    // 更新模态框隐藏框
    document.getElementById("modal_customerName").value = customerName;
    document.getElementById("modal_customerEmail").value = customerEmail;
}

核心问题3：提交时未正确赋值到主页面输入框 #

修改表单提交逻辑，获取模态框隐藏框的最新值，再赋值给主页面的输入框：

$(function() {
    $("#get_customer").on('submit',function(e){
        e.preventDefault();
        // 获取模态框内隐藏框的选中客户数据
        var customers_name = document.getElementById("modal_customerName").value;
        var customers_email = document.getElementById("modal_customerEmail").value;
        
        // 赋值到主页面的可见输入框
        document.getElementById('customerName').value = customers_name;
        document.getElementById('customerEmail').value = customers_email;
        
        // 关闭模态框
        $("#popModal").modal("hide");
    })
});

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