CODEWITHSUNDEEP
phpjavascriptjquery
AnchovyLegend
AnchovyLegend

Reputation: 12538

Dynamically added input fields not getting posted?

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

Upvotes: 0

Views: 522

Answers (3)

Bergi
Bergi

Reputation: 664297

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

Upvotes: 4

ithcy
ithcy

Reputation: 5589

You are not giving new names to the elements you create. You are also disabling them.

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

Disabled form inputs will never be submitted with the form.

Upvotes: 1

Icarus
Icarus

Reputation: 63956

The values are not being posted because you are disabling them. Input elements with disabled attribute don't get posted.

Also, always make sure that elements have unique ids and names. Elements without names don't get posted.

Upvotes: 4

Related Questions