Question

The code below consists of invoice-lines that contain some input fields that the user can fill out. The initial number of input lines is 20. Users will often need to add more lines to the invoice by clicking the “Add lines” button. Every click of this button uses Javascript to append more lines to the invoice.

The problem is when the form gets submitted only the first 20 lines seem to get submitted. All the javascript appended invoice lines are ignored and never POSTed.

I have been trying to work out this problem for quite a while now, I was wondering if someone can guide me as to how to go about implementing this correctly?

Many thanks in advance.

Markup / 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

You forgot to change the name attributes of the cloned inputs. They would overwrite previous fields.

Use this:

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;
});