Saving multiple inputs from dynamically added field by user

Question

I have a simple form, in which a user can add multiple forms as they wish, am using laravel and ajax.

Here is jsfiddle: dynamic adding field by user

HERE IS HTML

<form id="paramsForms">
        {{csrf_field()}}
     
                          
        <div class="modal-body">
            <div class="container h-100">
                <div class="d-flex justify-content-center">
                                
                    <div class="card mt-5 col-md-12 animated bounceInDown myForm" id="multiple-container">
                        <div class="card-header">
                            <h4>Bidders Information</h4>
                        </div>
                        <div class="card-body" id="add_info">
                            <div id="dynamic_container">
                                                  
                                <small id="bidder">Bidder 1</small>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                    </div>
                                    <input type="text" placeholder="Bidders Name" name="bidders_name[]" class="form-control"/>
                                </div>
                                <div class="input-group mt-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                    </div>
                                    <input type="text" placeholder="atribute name" name="params_name[]"  class="form-control"/>
                                    <input type="number" placeholder="atribute value" name="params_value[]" class="form-control"/>
                                    <a class="btn btn-secondary btn-sm moreinput_field" id="add_more_input">
                                        <i class="fa fa-plus-circle"></i> 
                                    </a>
                                </div>
                            </div>
                        </div>
    
                        <div class="card-footer" id="card-footer">
                            <a class="btn btn-success btn-sm" id="add_more"><i class="fa fa-plus-circle"></i> Add</a>
                            <!-- <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button> -->
                        </div>
    
                    </div>
                                  
    
                </div>
            </dvi>
        </div>
    
    
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" id="save" class="btn btn-primary">Save changes</button>
        </div>
    
    </form>

Here is my store function in my controller

public function store(Request $request){
dd($request);

if($request->ajax())
{
    $rules = array(
        'params_name.*'  => 'required',
        'params_value.*'  => 'required',
        'bidders_name.*' => 'required'
    );
    $error = Validator::make($request->all(), $rules);
    if($error->fails())
    {
        return response()->json([
            'error'  => $error->errors()->all()
        ]);
    }

    $params_name = $request->params_name;
    $params_value =$request->params_value;
    $bidders_name =$request->bidders_name;

    for($count = 0; $count < count($params_name); $count++)
    {
        $data = array(
            'params_name'   => $params_name[$count],
            'params_value'  => $params_value[$count],
            'bidders_name'  => $bidders_name[$count],

        );
        $insert_data[] = $data; 
    }

    Parameter::store($insert_data);
    return response()->json([
        'success'  => 'Data Added successfully.'
    ]);
}

}

Here is my ajax to save data without reloading

  $("#paramsForms").on('submit', function(e) {
      e.preventDefault();

      $.ajax({
          url: '/parameters',
          type: "POST",
          data: $(this).serialize(),
          dataType: 'json',
          beforeSend:function() {
              $("#save").attr('disabled', 'disabled');
          },
          success:function (data) {
              console.log(data);
              alert('Data successfull saved');
          },
          error:function (error) {
              console.log(error)
            console.log('Data not saved');
          }
      })   
  })

Now when user add eg three groups of inputs and submit the form I get message data saved successfully but when I check the database, the only first group of inputs is saved, whe I add dd($request) I get the following

What am I doing wrong in my codes?

Answer 1

You are wrapping your new cards in a form element.

41 var html =`  <div class="card-body" id="add_info${i}">
42                  <form> //remove me
                    ...
63                 </form> //remove me
64            </div>`;