php - 动态添加的输入字段未发布？

Question

下面的代码由发票行组成，其中包含一些用户可以填写的输入字段。输入行的初始数量为 20。用户通常需要通过单击“添加行”按钮向发票添加更多行。每次单击此按钮都会使用 JavaScript 将更多行添加到发票中。

问题是当提交表单时，似乎只有前 20 行被提交。所有附加的 javascript 发票行都将被忽略并且永远不会发布。

我已经尝试解决这个问题很长一段时间了，我想知道是否有人可以指导我如何正确实现这个问题？

提前非常感谢。

标记/PHP

      <?php
                for($i=0; $i < 20; $i++){
                    echo '
                    <div class="invoice-line">
                        <div class="prod-id-cell"><input name="rows['.$i.'][id]" type="text" class="prod-id-input">
                            <div class="smart-suggestions">
                                    <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->                              </div>
                        </div>
                        <div class="prod-name-cell">
                            <input type="text" name="rows['.$i.'][name]" class="prod-name-input"/>                                  <div class="smart-suggestions">
                                            <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
                                    </div>
                                </div>
                        <div class="price-cell"><input name="rows['.$i.'][price]" class="price-input" type="text" /></div>
                        <div class="quantity-cell"><input  name="rows['.$i.'][quantity]" type="text" class="quantity-input"></div>
                        <div class="unit-price-cell"><input name="rows['.$i.'][unit-price]" class="unit-price-input" type="text" /></div>
                        <div class="num-kits-cell"><input name="rows['.$i.'][num-kits]" class="num-kits-input" type="text" /></div>
                        <div class="amount-cell"><input name="rows['.$i.'][amount]" class="amount-input" type="text" readonly="readonly" /></div>
                    </div>';
                }
        ?>

Javascript

//**ADD 5 LINES**//
        $('.invoice-links div').on("click", ".add-five-trigger", function(){
            for(var i=0; i < 5; i++){
                var invoiceLine = $(".invoice-line").first().clone( true, true );
                $(invoiceLine).insertAfter(".invoice-line:last");
                $(".invoice-line:last").find('input').val('').attr('disabled','disabled');
            }
        });     

Answer 1

您忘记更改克隆输入的name 属性。他们会覆盖以前的字段。

使用这个:

var invoiceLine = $(".invoice-line").last();
var newLine = invoiceLine.clone( true, true );
invoiceLine.after(newLine);
newLine.find('input').each(function() {
    if (this.type == "text")
        this.value = "";
    this.name = this.name.replace(/rows\[(\d+)\]/, function(m, num) {
        return "rows["+(+num+1)+"]";
    });
    this.disabled = true;
});