Thursday, March 2, 2017

Empty Repeatable Fields in Laravel 5

In my Laravel 5 app, I have a set of repeatable field groups, each with a name field and a price field.

Here's the HTML on page load:

<div id="js-new-line-items" style="display: none">
    <div class="repeatable-fields">
    </div>
</div>
<a class="btn__add-field u-text-right" href="#" id="js-show-line-item-form">
    Or add a new line item
</a>

Here's the Javascript:

// Add new line items
var x = 0;
$( "#js-show-line-item-form" ).click(function(e) {
    e.preventDefault();
    $('#js-new-line-items').show();
    x++; //text box increment
    $(".repeatable-fields").append('<div class="field__repeatable"><input class="js-new-line-item-field js-new-line-item-name" placeholder="Enter New Line Item Name" name="new_lineItem['+x+'][name]" data-name-id="'+x+'" type="text"><input class="js-new-line-item-field js-new-line-item-price" placeholder="Enter Price" name="new_lineItem['+x+'][price]" data-price-id="'+x+'" type="text"></div>');
        // Display Line item preview in bill
      $('#js-display-custom-lineItem').append('<div class="bill-section__body-row"><span class="bill-section__body-row-item" id="js-new-display-line-item-name-'+x+'"></span><span class="bill-section__body-row-item" id="js-new-display-line-item-price-'+x+'"></span></div>');
});

And for legibility, here's the unpacked HTML that function appends:

<div class="field__repeatable">
    <input class="js-new-line-item-field js-new-line-item-name" placeholder="Enter New Line Item Name" name="new_lineItem['+x+'][name]" data-name-id="'+x+'" type="text">
    <input class="js-new-line-item-field js-new-line-item-price" placeholder="Enter Price" name="new_lineItem['+x+'][price]" data-price-id="'+x+'" type="text">
</div>

Now, this all works well. I can add as many field groups as I need, and the input names increment correctly.

However, when I submit the form, this is my request object:

array:8 [▼
    "_token" => "dKnCstu3pbQoXnH3bM5QTVDrHAZfwiKc7gPdAcDM"
    "description" => "test"
    "new_lineItem" => array:2 [▼
        1 => array:2 [▼
            "name" => ""
            "price" => ""
        ]
        2 => array:2 [▼
            "name" => ""
            "price" => ""
        ]
    ]
]

My name and price values are empty. I cannot, for the life of me, figure out why this is happening. Can anyone spot any errors with this implementation?



via Cameron Scott

Advertisement