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

【问题标题】：Dynamically add input fields and save data to Database动态添加输入字段并将数据保存到数据库
【发布时间】：2016-03-23 12:43:24
【问题描述】：

我想将多个数据保存到具有自动递增 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";
}

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

【问题讨论】：

标签： javascript php jquery mysql laravel-5

【解决方案1】：

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

将name="name' + i +'" 更改为name="name[]" 以获取带有$request->get('name') 的名称

【讨论】：

i chnage name="name[]" 在这一行
').appendTo(inp);但它不起作用。它再次只保存一个输入字段值

将.appendTo(inp);更改为.appendTo($('#box form'));

你好，和madalin一样，也提供不同的id：id="name' + i +'" and name="name[]" ...

@JyotiSharma 他可以删除 id，这只会影响 js

你正确的 bcz ID 没有在这里使用@madalinivascu

【解决方案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');
 }

我希望这对你有用。谢谢

【讨论】：