javascript - 动态添加输入字段并将数据保存到数据库

Question

我想将多个数据保存到具有自动递增 ID(1,2,3...等)的数据库中，而不是在同一列中。用户可以动态添加输入字段，最后单击提交按钮将数据保存在数据库中，每个字段的 ID(自动递增 ID)不同。

我的 js 生成用户想要的输入字段

<script>

$(document).ready(function(){

    $('#add').click(function(){

        var inp = $('#box');

        var i = $('input').size() + 1;

        $('<div id="box' + i +'"><input type="text" id="name" class="name" name="name' + i +'" placeholder="Input '+i+'"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo(inp);

        i++;

    });



    $('body').on('click','#remove',function(){

        $(this).parent('div').remove();


    });


});

</script>

形式:

<div id="box">
<form action="{{url('add')}}" method="post">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<input name="name[]" type="text" id="name" class="name" placeholder="Input 1">
<a href="#" id="add">Add More Input Field</a>
<input type="submit" value="submit">
</div>

路线:

Route::get('add','AddMoreController@create');
Route::post('add','AddMoreController@store');

Controller :

public function store(Request $request)
{
    foreach($request->get('name') as $name) {
        $bio =  new Bio;
        $bio->details = $name;
        //dd($request->get('name'));
        $bio->save();

    }
    return "Success";
}

但是它在数据库中只保存了一个输入字段值。任何可以帮助我的人。

Answer 1

这是你的问题 name="name' + i +'" 你正在请求 $request->get('name') 而不是 $request ->get('name1'),$request->get('name2') ...

将 name="name' + i +'" 更改为 name="name[]" 以使用 $request->get( '名称')