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.

madalinivascu · Accepted Answer · 2015-12-17 06:30:08Z

3

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

answered Dec 17, 2015 at 6:30

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ranjeet Karki Over a year ago

i chnage name="name[]" in this line <input type="text" id="name" class="name" name="name[]" placeholder="Input '+i+'"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo(inp); but its not working.it saves only one input field value again

madalinivascu Over a year ago

change .appendTo(inp); to .appendTo($('#box form'));

Jyoti Sharma Over a year ago

hello do it same as madalin and provide different id as well: id="name' + i +'" and name="name[]" ...

madalinivascu Over a year ago

@JyotiSharma he can remove the id,this will affect only js

Jyoti Sharma Over a year ago

Ya correct bcz Ids are not using here @madalinivascu

|

Parth Navadiya · Accepted Answer · 2017-12-27 12:47:18Z

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

Collectives™ on Stack Overflow

Dynamically add input fields and save data to Database

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related