Submit form array fields using Ajax

Question

I have an html table (inside a form) that has a textfield and select on each row.

<td><input class="form-control" required name="item[{{ $item_row }}][name]" type="text"></td>
<td> <select name="item[{{ $item_row }}][output_type]" class="form-control">
     <option value="">--Please select--</option>
</td>

When I submit this form, I get the values like this -

"item" => array:1 [▼
    0 => array:2 [▼
      "name" => "Buy pizza"
      "output_type" => "2"
    ]
  ]

However I want to get these values in an array (using JQuery) and send to the backend using ajax. I did this -

var items = $( "[name^='item']" );

but I got - [object Object] when I console log and this does not send to the backend as I get this error - jquery-2.2.4.min.js:4 Uncaught RangeError: Maximum call stack size exceeded

Ajax call:

$.ajax({
            url: "<?php echo route('validate') ?>",
            method: 'GET',
            async:false,
            data: {items:items},
            success: function(data) {
                var data = JSON.parse(data);
                console.log(data)
            }
        });

Please how do I resolve this?

Try `data: items.serialize()`. See https://api.jquery.com/serialize/ — Phil, Aug 11 '20 at 01:34
Did you tried , make empty data array empty after that items.each() in this try to append that values to data array after that save it — Salem loress, Aug 11 '20 at 01:52

Submit form array fields using Ajax

0 Answers0