I have an issue where passing a serializeArray data Ajax Post to a Controller ends up producing results that I did not expect.
The goal is after keying all the data in, then on submit, the data is passed to serializeArray(), then in each function becomes a proper array. Then it is sent via Ajax Post to controller.
Below is the code example not the whole thing, except the form. Continue after showing code...
Form example before Ajax(when i start using ajax, i delete the action)
<form id="form" action="{{ route('send.to.controller') }}">
<input type="text" name="details">
<input type="text" name="products[0][id]">
<input type="text" name="products[0][qty]">
<textarea name="products[0]serials"></textarea>
<input type="text" name="products[1][id]">
<input type="text" name="products[1][qty]">
<textarea name="products[1]serials"></textarea>
<input type="text" name="products[2][id]">
<input type="text" name="products[2][qty]">
<textarea name="products[2]serials"></textarea>
</form>
Current jquery i am trying to achieve
var x = $('#form-create-storing').serializeArray();
var formData = {};
$.each(x, function(i, field){
if(field.value.trim() != ""){
if(formData[field.name] != undefined){
var val = formData[field.name];
if(!Array.isArray(val)){
arr = [val];
}
arr.push(field.value.trim());
formData[field.name] = arr;
}else{
formData[field.name] = field.value;
}
}
});
$.ajax({
url: '{{ route("storings.store") }}',
type: 'post',
dataType: 'json',
data: {
'data': formData,
}
});
What i get from console.log
{userid: "1", grn_number: "111111", supplier_id: "2", delivery_order_name: "1111111111", delivery_order_date: "2020-11-18", …}
delivery_order_date: "2020-11-18"
delivery_order_name: "1111111111"
grn_number: "111111"
products[0][id]: "110"
products[0][qty]: "1"
products[0][serial]: "111;
↵"
products[1][id]: "113"
products[1][qty]: "1"
products[2][id]: "114"
products[2][qty]: "1"
products[2][serial]: "111;
↵"
supplier_id: "2"
userid: "1"
What is shown in Controller
array:1 [
"data" => array:8 [
"userid" => "1"
"grn_number" => "111111"
"supplier_id" => "2"
"delivery_order_name" => "1111111111"
"delivery_order_date" => "2020-11-18"
"products[0" => array:3 [
"id" => "110"
"qty" => "1"
"serial" => "111;"
]
"products[1" => array:2 [
"id" => "113"
"qty" => "1"
]
"products[2" => array:3 [
"id" => "114"
"qty" => "1"
"serial" => "111;"
]
]
]
As you can see the above the products[#] has it "]" cut
Before i am using Jquery Ajax to send the data, i use the normal routing post form to pass the data,
How i want it to be is actually
array:1 [
"data" => array:8 [
"userid" => "1"
"grn_number" => "111111"
"supplier_id" => "2"
"delivery_order_name" => "1111111111"
"delivery_order_date" => "2020-11-18"
"products" => array:3 [
[0] => [
"id" => "110"
"qty" => "1"
"serial" => "111;"
]
[1] => [
"id" => "113"
"qty" => "1"
]
[2] => [
"id" => "114"
"qty" => "1"
"serial" => "111;"
]
]
]
]
Where do I go wrong?
Update
base on @miken32, i've change the following
var x = $('#form-create-storing').serializeArray();
to
var x = $('#form-create-storing').serialize();
url: '{{ route("storings.store") }}',
to
url: @json(route("storings.store")),
When it pass to controller I get
array:1 [
"data" => "userid=1&grn_number=111111&supplier_id=3&delivery_order_name=1111111111&delivery_order_date=2020-11-20&products%5B0%5D%5Bid%5D=110&products%5B0%5D%5Bqty%5D=1&products%5B0%5D%5Bserial%5D=&products%5B1%5D%5Bid%5D=112&products%5B1%5D%5Bqty%5D=2&products%5B1%5D%5Bserial%5D="
]