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" => ""
        ]
    ]
]

我的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');

<强>控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class testController extends Controller
{
    //

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

<强>结果

Answer 2

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

Laravel 5中的空可重复字段

2 个答案: