Dynamically add input fields and save data to Database

Question

I want to save the multiple data to database with autoincremented id (1,2,3...etc),not in same column. User can dynamically add input fields and finally click submit button to save data in database with different id(auto incremented id) for each.

my js to generate input field as many as user wants

<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>

form:

<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:

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";
}

But itsaves only one input field value in database. Anyone who can help me.

Answer 1

This is you problem name="name' + i +'" you are requesting $request->get('name') not $request->get('name1'),$request->get('name2') ...

Change name="name' + i +'" to name="name[]" to get the name with $request->get('name')

Answer 2

Apply form code in your view file:

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

my Jquery file:

  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();
    });

add this in controller file:

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

I hope this work for you.Thanks