Laravel Submitting form with same input name ajax-CodePudding

I need help with my ajax function. I have a form that submits data with the same input name

When I run my code without javascript, I can insert multiple input data with the same name,

Submitted structure

{"_token":"CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu","id":"7","service_name":["asfd","safd"]}

When I implement javascript, a concatenated string is sent to the controller and this makes the service_name inaccessible.

formdata:"_token=CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu&id=7&service_name[]=sdfg&service_name[]=gfds&_token=CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu&id=8&_token=CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu&id=9&_token=CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu&id=10&_token=CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu&id=11&_token=CepbQkKwKziSRwDJKuqlEa5i4E21Y5jvSbmDNvqu&id=18"

My javascript function

jQuery("form.ajax").on("submit", function (e) {
  e.preventDefault();
  jQuery.ajax({
    url: "/admin/adminpanel/insertService/",
    type: "post",
    data: {
      formdata: $(".ajax#servicesForm").serialize()
    },
    dataType: "JSON",
    success: function (response) {
      console.log(response);
    },
    error: function (jqXHR, exception) {
      var msg = "";
      if (jqXHR.status === 0) {
        msg = "Not connect.\n Verify Network.";
      } else if (jqXHR.status === 404) {
        msg = "Requested page not found. [404]";
      } else if (jqXHR.status === 500) {
        msg = "Internal Server Error [500].";
      } else if (exception === "parsererror") {
        msg = "function Requested JSON parse failed.";
      } else if (exception === "timeout") {
        msg = "Time out error.";
      } else if (exception === "abort") {
        msg = "Ajax request aborted.";
      } else {
        msg = "Uncaught Error.\n"   jqXHR.responseText;
      }
    }
  });
});

My PHP Controller Function

public function insert(Request $request)
        {
    
             return response()->json($request);
    }

CodePudding user response：

use FormData Object, to send fromdata

fd = new FormData();

fd.append("input-name", value1);
fd.append("input-name2", value2 OR arry of value);


jQuery.ajax({
url: "/admin/adminpanel/insertService/",
type: "post",
data: {
  formdata: fd
}

CodePudding user response：

I found a workaround:

First, I created an array, and pushed all instances of input[name='service_name[]'] into the array.

Then I passed the data with ajax and was able to insert the data.

var serviceArray = new Array(), id;
jQuery.map($("input[name='service_name[]']"), function(obj, index) {
    serviceArray.push($(obj).val());
});

My ajax script then:

jQuery.ajax({
    url: "/admin/adminpanel/insertService/",
    type: 'post',
    data: {
        'service_name': serviceArray,
        'id': id
    },
    dataType: 'JSON',
    success: function(response) {
        console.log(response);
    }
});