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

控制器：

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('name')

的名称

Answer 2

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

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

我希望这对你有用。谢谢

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

2 个答案: