PHP动态生成表单行无法自动填充前表单传入的empid值

问题 #

PHP表单中，从上个页面POST过来的empid能正常填充到第一行输入框，但点击"Add Item"动态生成新行时，新行的empid输入框无法自动填充该值。

原因分析 #

动态添加行的JavaScript代码中，$(v).find("input").val('');这一行会清空所有克隆出来的输入框值，包括empid输入框，导致新行无法保留预设的empid值。另外，模板行的重复ID可能引发DOM冲突。

解决方案 #

1. 将PHP中的empid值传递给JavaScript #

在页面头部（JavaScript代码之前）添加以下代码，把PHP获取的empid值转为全局JS变量，同时避免XSS风险：

<script>
const EMP_ID = "<?php echo htmlspecialchars($empid ?? ''); ?>";
</script>

2. 调整动态添加行的JavaScript逻辑 #

修改BtnAdd函数，只清空subject输入框，保留/设置empid的值，同时移除重复ID避免DOM冲突：

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    
    // 仅清空subject输入框，不影响empid
    $(v).find("input[name='subject[]']").val('');
    
    // 移除克隆元素的ID，避免重复ID引发的DOM问题
    $(v).find("input").removeAttr('id');
    
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    
    $(v).removeClass("d-none");
    
    // 给新行的empid输入框赋值
    $(v).find("input[name='empid[]']").val(EMP_ID);
    
    // 修正行号计数，排除隐藏的模板行
    $(v).find("th").first().html($('#TBody tr:not(.d-none)').length);
}

3. 优化模板行（可选） #

直接去掉模板行中input的id属性，因为我们通过name数组提交数据，ID在这里不是必需的，从根源避免重复ID问题：

<tr id="TRow" class="d-none">
    <td>
        <input
            type="text"
            name="empid[]"
            value="<?php echo htmlspecialchars($empid ?? ''); ?>"
            class="zzz1 form-control text-end"
        >
    </td>
    <td>
        <input
            type="text"
            name="subject[]"
            class="state form-control text-end"
            required
        >
    </td>
    <td class="NoPrint">
        <button
            type="button"
            class="btn btn-success"
            style="line-height: 1;"
            onclick="BtnDel(this)"
        >
            x
        </button>
    </td>
</tr>

4. 修正删除行后的行号逻辑（可选） #

修改BtnDel函数中的行号更新逻辑，确保删除行后行号连续且从1开始计数：

function BtnDel(v)
{
    /*Delete Button*/
    $(v).parent().parent().remove(); 
    GetTotal();

    $("#TBody").find("tr:not(.d-none)").each(function(index) {
        $(this).find("th").first().html(index + 1);
    });
}

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