Laravel Submitting form with same input name ajax

Question

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%5B%5D=sdfg&service_name%5B%5D=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);
    }

Maybe this stackoverflow.com/a/323044/7498116

porloscerros Ψ
– porloscerros Ψ

2021-11-05 12:08:29 +00:00
Commented Nov 5, 2021 at 12:08 — porloscerros Ψ
– porloscerros Ψ, Commented Nov 5, 2021 at 12:08

Jatin kabariya · Accepted Answer · 2021-11-06 05:45:21Z

0

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
}

answered Nov 6, 2021 at 5:45

Jatin kabariya

212 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EgoPingvina · Accepted Answer · 2021-11-06 11:06:27Z

0

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);
    }
});

edited Nov 6, 2021 at 11:06

EgoPingvina

8581 gold badge13 silver badges39 bronze badges

answered Nov 6, 2021 at 7:32

Thando Hlophe

672 silver badges13 bronze badges

Collectives™ on Stack Overflow

Laravel Submitting form with same input name ajax

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related