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

由于您要禁用这些值，因此未发布这些值。具有禁用属性的输入元素不会被发布。

此外，始终确保元素具有唯一的ID和名称。没有名字的元素不会被发布。

Answer 2

您忘记更改克隆输入的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;
});

Answer 3

您没有为您创建的元素指定新名称。你也在禁用它们。

$(".invoice-line:last").find('input').val('').attr('disabled','disabled');

禁用表单输入将永远不会随表单一起提交。

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

3 个答案: