javascript - Laravel 5 中的空可重复字段

Question

在我的 Laravel 5 应用程序中，我有一组可重复的字段组，每个字段组都有一个 name 字段和一个 price 字段。

这是页面加载时的 HTML:

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

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

为了便于阅读，这里是函数附加的未打包的 HTML:

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

现在，这一切都运行良好。我可以根据需要添加任意数量的字段组，并且输入名称会正确递增。

但是，当我提交表单时，这是我的请求对象:

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

我的名称和价格值为空。我一生都无法弄清楚为什么会发生这种情况。任何人都可以发现此实现中的任何错误吗？

Answer 1

我测试了你的代码(只需复制并粘贴到我的 laravel 项目中)，它工作正常。即字段不为空。

以下是供您引用的代码(您可以比较您缺少的内容):

HTML 代码

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

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

结果