title: How to save multiple row forms in laravel using ajax?
body: <p>Hey guys I'm a bit confused with this. How do I input multi row forms in Laravel 5.5 using ajax? The idea is to add items and when adding items the Item number increments, then
  I want to save this table in my database:
  <a href="https://i.stack.imgur.com/k94Kd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k94Kd.png" alt="enter image description here"></a> </p>
  
  <h3>Here is my code for the blade with its script:</h3>
  
  <p><em>pr-items.blade.php</em></p>
  
  <pre><code>@extends('layouts.app')
  @section('content')
  
  &lt;div class="container-fluid"&gt;
  &lt;!-- Your main wrapper --&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;&lt;h3 class="panel-title"&gt;Add Items&lt;/h3&gt;&lt;/div&gt;
                  &lt;div class="panel-body"&gt;
  
                      &lt;form name="add_item" id="add_item" class="form-inline"&gt;
                      {{ csrf_field() }}
  
  
                        &lt;div class="form-group"&gt;
                          &lt;label for="pr_form_number"&gt;PR Form Number: &lt;/label&gt;
                          &lt;input type="text" class="form-control" name="pr_number" value="{{$pr_details}}" readonly required&gt;&lt;br&gt;&lt;br&gt;
                        &lt;/div&gt;
  
                        &lt;div class="table-responsive"&gt;
                          &lt;table class='table table-bordered table-hover' id="tab_logic"&gt;
                              &lt;thead&gt;
                                  &lt;tr class='info'&gt;
                                      &lt;th style='width:10%;'&gt;ITEM NO.&lt;/th&gt;
                                      &lt;th style='width:10%;'&gt;QTY&lt;/th&gt;
                                      &lt;th style='width:10%;'&gt;UNIT&lt;/th&gt;
                                      &lt;th style='width:30%;'&gt;DESCRIPTION&lt;/th&gt;
                                      &lt;th style='width:10%;'&gt;COST PER UNIT&lt;/th&gt;
                                      &lt;th style='width:10%;'&gt;COST PER ITEM&lt;/th&gt;
                                      &lt;th style='width:10%;'&gt;ACTION&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;thead&gt;
                                  &lt;tr id="addr0"&gt;
                                      &lt;td class="custom-tbl"&gt;&lt;input class='form-control input-sm'style='width:100%;' type="text" value="1" id="pr_item0" name="pr_item[]" readonly required&gt;&lt;/td&gt;
                                      &lt;td class="custom-tbl"&gt;&lt;input class='form-control input-sm' style='width:100%;' type="text" id="pr_qty0" oninput='multiply(0);' name="pr_qty[]"&gt;&lt;/td&gt;
                                      &lt;td class="custom-tbl"&gt;&lt;input class='form-control input-sm' style='width:100%;' type="text" id="pr_unit0" name="pr_unit[]"&gt;&lt;/td&gt;
                                      &lt;td class="custom-tbl"&gt;&lt;input class='form-control input-sm' style='width:100%;' type="text" id="pr_desc0" name="pr_desc[]"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input class='form-control input-sm' style='width:100%;' type="text" id="pr_cpu0" oninput='multiply(0);' name="pr_cpu[]"&gt;&lt;/td&gt;
                                      &lt;td class="custom-tbl"&gt;&lt;input class='estimated_cost form-control input-sm' id="pr_cpi0" style='width:100%;' type="text" name="pr_cpi[]" readonly&gt;&lt;/td&gt;
                                      &lt;td class="custom-tbl"&gt;&lt;button type="button" id="add" class="btn btn-info btn-sm"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody id="dynamic_field"&gt;
  
                              &lt;tbody&gt;
                              &lt;tfoot&gt;
                                  &lt;tr class='info'&gt;
                                      &lt;td style='width:65%;text-align:right;padding:4px;' colspan='5'&gt;GRAND TOTAL:&lt;/td&gt;
                                      &lt;td style='padding:0px;'&gt;
  
                                              &lt;input style='width:100%;' type='text' class='form-control input-sm' id='grand_total' name='grand_total' value='0' readonly required&gt;
  
                                      &lt;/td&gt;
  
                              &lt;/tfoot&gt;
  
                          &lt;/table&gt;
                        &lt;/div&gt;
  
  
                        &lt;button type="button" id="submit" name="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  
  @endsection
  
  @section('script')
  &lt;script type="text/javascript"&gt;
  
  
  
  $(document).ready(function(){      
        var postURL = "&lt;?php echo url('addmore'); ?&gt;";
        var i=1;  
  
  
        $('#add').click(function(){
             i++;  
             $('#dynamic_field').append('&lt;tr id="row'+i+'" class="dynamic-added"&gt;&lt;td class="custom-tbl"&gt;&lt;input id="pr_item'+i+'" class="form-control input-sm"style="width:100%;" type="text" value="'+i+'" name="pr_item[]" readonly required&gt;&lt;/td&gt;&lt;td class="custom-tbl"&gt;&lt;input id="pr_qty'+i+'"class="form-control input-sm" style="width:100%;" type="text" oninput="multiply('+i+');" name="pr_qty[]"&gt;&lt;/td&gt;&lt;td class="custom-tbl"&gt;&lt;input id="pr_unit'+i+'"class="form-control input-sm" style="width:100%;" type="text" name="pr_unit[]"&gt;&lt;/td&gt;&lt;td class="custom-tbl"&gt;&lt;input id="pr_desc'+i+'" class="form-control input-sm" style="width:100%;" type="text" name="pr_desc[]"&gt;&lt;/td&gt;&lt;td class="custom-tbl"&gt;&lt;input id="pr_cpu'+i+'" class="form-control input-sm" style="width:100%;" type="text" oninput="multiply('+i+');" name="pr_cpu[]"&gt;&lt;/td&gt;&lt;td class="custom-tbl"&gt;&lt;input id="pr_cpi'+i+'" class="estimated_cost form-control input-sm" style="width:100%;" type="text" name="pr_cpi[]" readonly&gt;&lt;/td&gt;&lt;td class="custom-tbl"&gt;&lt;button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-sm btn_remove"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');  
        });  
  
  
        $(document).on('click', '.btn_remove', function(){  
             var button_id = $(this).attr("id");   
             $('#row'+button_id+'').remove();  
        });
  
        $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
  
  
        $('#submit').click(function(){            
             $.ajax({  
                  url:"{{route('pr.items.add')}}",  
                  method:"POST",  
                  data:$('#add_item').serialize(),
                  type:'json',
  
             });  
        });  
  
      });
  
  
  
  
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function multiply(id)
          {
              var total1=parseFloat($('#pr_qty'+id).val())*parseFloat($('#pr_cpu'+id).val());
              $("input[id=pr_cpi" + id + "]").val(total1);
              grandTotal();
          }
  function grandTotal()
          {
              var items = document.getElementsByClassName("estimated_cost");
              var itemCount = items.length;
              var total = 0;
              for(var i = 0; i &lt; itemCount; i++)
              {
                  total = total +  parseFloat(items[i].value);
              }
              document.getElementById('grand_total').value = total;
          }
  &lt;/script&gt;
  
  @endsection
  </code></pre>
  
  <h3>And here is a part of my controller for storing its data</h3>
  
  <p><em>PurchaseRequestItemController.php</em></p>
  
  <pre><code> public function store(Request $request)
      {
          //
  
  
          $rules = [];
  
  
          foreach($request-&gt;input('pr_item') as $key =&gt; $value) {
              $rules["pr_item.{$key}"] = 'required';
              $rules["pr_qty.{$key}"] = 'required';
              $rules["pr_unit.{$key}"] = 'required';
              $rules["pr_desc.{$key}"] = 'required';
              $rules["pr_cpu.{$key}"] = 'required';
              $rules["pr_cpi.{$key}"] = 'required';
          }
  
  
          $validator = Validator::make($request-&gt;all(), $rules);
  
  
          if ($validator-&gt;passes()) {
  
  
              foreach($request-&gt;input('pr_item') as $key =&gt; $value) {
  
                  $Record=new PurchaseRequestItemModel;
  
                  $Record-&gt;pr_form_number = $request-&gt;get('pr_number');
                  $Record-&gt;item_no = $request-&gt;get('pr_item');
                  $Record-&gt;pr_qty = $request-&gt;get('pr_qty');
                  $Record-&gt;pr_unit = $request-&gt;get('pr_unit');
                  $Record-&gt;pr_description =$request-&gt;get('pr_desc') ; 
                  $Record-&gt;pr_cost_per_unit =$request-&gt;get('pr_cpu') ;
                  $Record-&gt;pr_estimated_cost =$request-&gt;get('pr_cpi') ;
  
                  $Record-&gt;save();
              }
  
  
              return response()-&gt;json(['success'=&gt;'done']);
          }else{
  
          return response()-&gt;json(['error'=&gt;$validator-&gt;errors()-&gt;all()]);}
  
  
  
  
      }
  </code></pre>
  
  <p><strong><em>edit: Also my form is an array.</em></strong>
  How do I also make sure that after saving I can view the table as it is?</p>
  
  <p>It also returns this error when I save
  <a href="https://i.stack.imgur.com/yw0vx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yw0vx.png" alt="enter image description here"></a></p>