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

Question

我想用自动递增的id（1,2,3…等）将多个数据保存到数据库中，而不是保存在同一列中。用户可以动态添加输入字段，最后单击submit按钮，以不同的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');

控制器：

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

在视图文件中应用表单代码：

{!! Form::open(array('route' => 'itemCRUD.store','method'=>'POST')) !!}
<div class="forminfo" id="addform">
<div class="row" name="name">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>Title:</strong>
            {!! Form::text('title[]', null, array('placeholder' => 'Title','class' => 'form-control')) !!}
        </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>Description:</strong>
            {!! Form::textarea('description[]', null, array('placeholder' => 'Description','class' => 'form-control','style'=>'height:100px')) !!}
        </div>
    </div>
    </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary pull-right" style="margin-top:2px">Submit</button>
    </div>   
    <button type="button" id="addmore" class="btn btn-success">Add more</button>
{!! Form::close() !!}

我的Jquery文件：

  var $i = 1;
    $("#addmore").on("click", function () {
       if($i == 5) {
        alert('You add 5 items at a one time');
       }
       else{
           $("#addform").append("<div class='row' name='name"+$i+"' id='name"+$i+"'><div class='col-xs-12 col-sm-12 col-md-12'><div class='form-group'><strong>Title:</strong><input placeholder='Title' class='form-control' name='title[]' type='text'></div></div><div class='col-xs-12 col-sm-12 col-md-12'><div class='form-group'><strong>Description:</strong><textarea placeholder='Description' class='form-control' style='height:100px' name='description[]' cols='50' rows='10'></textarea></div></div><div class='col-xs-12 col-sm-12 col-md-12 text-center '><button type='button' id='deleteForm1' class='btn btn-danger pull-right deleteform'>Delete</button></div></div>");            
       }
       $i++;
    });

    $("body").on("click", ".deleteform", function () {
        $(this).parent().parent().remove();
    });

将此添加到控制器文件中：

 public function store(Request $request)
{
    $this->validate($request, [
        'title' => 'required',
        'description' => 'required',
    ]);
        $title = $request->get('title');
        $description = $request->get('description');
        foreach($title as $key=>$val){

            Item::create(
                [
                    'title'=>$val,
                    'description'=>$description[$key]
                ]
            );
        }
    return redirect()->route('itemCRUD.index')
                    ->with('success','Item created successfully');
 }

我希望这对你有用。谢啦

Answer 2

这就是您正在请求的问题-

将name=“name'i'”更改为name=“name[]”以使用$request获取名称-