0

下面的代码由包含用户可以填写的一些输入字段的发票行组成。初始输入行数为 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');
            }
        });
4

3 回答 3

4

这些值未发布，因为您正在禁用它们。具有 disabled 属性的输入元素不会被发布。

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

于 2013-01-10T22:08:02.177 回答
4

您忘记更改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;
});
于 2013-01-10T22:10:44.630 回答
1

您没有为您创建的元素赋予新名称。您也在禁用它们。

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

禁用的表单输入永远不会与表单一起提交。

于 2013-01-10T22:11:46.503 回答