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