如何修复PHP+HTML动态textarea的name属性计数问题？

问题根源 #

你的代码核心问题在于PHP是服务器端脚本，页面加载时就已执行完毕：

• 初始的$counter只会在页面第一次渲染时输出0，之后点击ADD按钮时，JS是在客户端运行，不会再触发PHP代码执行，所以所有新增行的name都会固定为limit[0]和amount[0]。
• 重复使用id="row"和id="DeleteRow"违反HTML规范（id必须唯一），会导致删除按钮事件绑定异常。

解决方案1：用JavaScript维护计数器（明确索引值） #

直接在客户端用JS管理递增的索引，不需要依赖PHP的服务器端渲染。

修改后的完整代码

<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong>Adding and Deleting Input fields Dynamically</strong>
    <div style="width:40%;">
        <form action="" method="post">
            <div class="">
                <div class="col-lg-12">
                    <!-- 第一行固定索引为0 -->
                    <div class="row">
                        <div class="input-group m-3">
                            <div class="input-group-prepend">
                                <button class="btn btn-danger DeleteRow" type="button">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </div>
                            <textarea name="limit[0]" type="number" class="form-control m-input" placeholder="Code"></textarea>&nbsp;&nbsp;
                            <textarea name="amount[0]" type="number" class="form-control m-input" placeholder="Amount"></textarea>
                        </div>
                    </div>

                    <div id="newinput"></div>
                    <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted"></span> ADD
                    </button>
                </div>
            </div>
            <input type="submit" value="test">
        </form>
    </div>
</body>

<script type="text/javascript">
    // 初始化计数器，第一行已用0，从1开始
    let rowCounter = 1;

    $("#rowAdder").click(function () {
        // 用ES6模板字符串插入当前计数器值
        const newRowAdd = `
            <div class="row">
                <div class="input-group m-3">
                    <div class="input-group-prepend">
                        <button class="btn btn-danger DeleteRow" type="button">
                            <i class="bi bi-trash"></i> Delete
                        </button>
                    </div>
                    <textarea name="limit[${rowCounter}]" type="number" class="form-control m-input" placeholder="Code"></textarea>&nbsp;&nbsp;
                    <textarea name="amount[${rowCounter}]" type="number" class="form-control m-input" placeholder="Amount"></textarea>
                </div>
            </div>
        `;

        $('#newinput').append(newRowAdd);
        rowCounter++; // 新增后计数器自增
    });

    // 用class选择器绑定删除事件（避免重复id问题）
    $("body").on("click", ".DeleteRow", function () {
        $(this).parents(".row").remove();
    });
</script>

解决方案2：使用PHP自动索引（更简洁） #

PHP支持动态数组提交，不需要手动维护索引，直接用limit[]和amount[]作为name属性，后端会自动将提交的字段整理为连续索引的数组。

核心修改点

1. 所有textarea的name改为limit[]和amount[]：

<!-- 第一行 -->
<textarea name="limit[]" type="number" class="form-control m-input" placeholder="Code"></textarea>&nbsp;&nbsp;
<textarea name="amount[]" type="number" class="form-control m-input" placeholder="Amount"></textarea>

2. JS新增行的name也用limit[]和amount[]：

$("#rowAdder").click(function () {
    const newRowAdd = `
        <div class="row">
            <div class="input-group m-3">
                <div class="input-group-prepend">
                    <button class="btn btn-danger DeleteRow" type="button">
                        <i class="bi bi-trash"></i> Delete
                    </button>
                </div>
                <textarea name="limit[]" type="number" class="form-control m-input" placeholder="Code"></textarea>&nbsp;&nbsp;
                <textarea name="amount[]" type="number" class="form-control m-input" placeholder="Amount"></textarea>
            </div>
        </div>
    `;

    $('#newinput').append(newRowAdd);
});

提交后，PHP可以通过$_POST['limit']和$_POST['amount']获取两个长度一致的数组，索引从0开始递增，完全符合你的需求。这种方式是PHP处理动态表单的常规做法，代码更简洁，无需维护计数器。

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