Empty Repeatable Fields in Laravel 5

Question

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?

Answer 1

I test your code (just copy and pasted in my laravel project) and it was working fine. i.e. fields were not empty.

Following is the code for your reference (You can compare where you are missing something ) :

HTML Code

<form method="POST" action="{{url('form-submit')}}">

{{ csrf_field() }}

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

<input type="submit" name="">   

Javascript Code

<script type="text/javascript">

$(document).ready(function(){

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

});

Route

Route::post('form-submit', 'testController@formsubmit');

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class testController extends Controller
{
    //

    public function formsubmit(Request $request)
    {
        dd($request);
    }
}

Result

Answer 2

Use this in 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[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[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>');
});