Issue with sending array as parameter in ajax call in Laravel

Question

Issue with sending array as parameter in ajax call in Laravel

I am currently encountering an issue while attempting to pass an array through an AJAX request.

<input type="text" name="item_name[]">
<input type="text" name="address">

 $(document).on('click', '#save_info', function () {
        var address = $("#address").val();
        var item_name = $("[name^='item_name']");

       $.ajax({
            url: '/save_information',
            dataType: "json",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                address: address,
                item_name: item_name,
          }
        });
    });

Upon checking my controller, I attempted to access the item_name variable from the request but encountered an error. The code snippet below shows my attempt:

    $item_name = $request->item_name;
    $array_count = count($item_name);

This implementation is causing an error for me. Could someone provide guidance on how to correctly save array values using a loop? Thank you in advance.

javascript ajax laravel-5

Answer 1

Answer №1

@John Doe you have the option to make this code more concise using serializeArray.

    $(document).on('click', '#save_info', function () {
      var serializedData = $("[name^='item_name']").serializeArray();
      serializedData.push(
        {
          name: "address", value: $("#address").val()
        },
        {
          name: "_token", value: '{{ csrf_token() }}'
        },
      );
      $.ajax({
        url: '/save_information',
        dataType: "json",
        type: 'POST',
        data: serializedData
      });
    });

Alternatively, if you are utilizing a <form>, you can achieve the same with minimal code:

  $(document).on('click', '#save_info', function () {
      $.ajax({
        url: '/save_information',
        dataType: "json",
        type: 'POST',
        data: $('form#myform').serialize(),
      });
    });
`

Answer 2

@John Doe you have the option to make this code more concise using serializeArray.

    $(document).on('click', '#save_info', function () {
      var serializedData = $("[name^='item_name']").serializeArray();
      serializedData.push(
        {
          name: "address", value: $("#address").val()
        },
        {
          name: "_token", value: '{{ csrf_token() }}'
        },
      );
      $.ajax({
        url: '/save_information',
        dataType: "json",
        type: 'POST',
        data: serializedData
      });
    });

Alternatively, if you are utilizing a <form>, you can achieve the same with minimal code:

  $(document).on('click', '#save_info', function () {
      $.ajax({
        url: '/save_information',
        dataType: "json",
        type: 'POST',
        data: $('form#myform').serialize(),
      });
    });
`

Answer 3

Answer №2

The content of the item_name variable is a DOM Node rather than input values. To correct this, you should define it as either

var item_name = $("[name^='item_name']").val()

or

var item_name = $("[name^='item_name']").value

Answer 4

The content of the item_name variable is a DOM Node rather than input values. To correct this, you should define it as either

var item_name = $("[name^='item_name']").val()

or

var item_name = $("[name^='item_name']").value

Issue with sending array as parameter in ajax call in Laravel

Answer №1

Answer №2

Similar questions

Error: An unexpected TypeError occurred while attempting to fetch an array or collection from MongoDB Atlas

Retrieving time zone using offset with javascript

Which is causing the block: the event loop or the CPU?

Check to see if the property of the object does not exist within the array and update as

The onClick event for "history.go(0)" is functional in Internet Explorer, but it does not work in Mozilla Firefox. What can be done to address this problem specifically for Mozilla browser?

Activate Bootstrap 5 dropdown exclusively when positioned above its parent element

"Drag and drop elements that automatically snap to a grid and move with

JavaScript function is returning 'undefined' instead of an integer

Morgan middleware in Express.js specifically targeting unsuccessful requests for logging purposes

explore the route with the help of jquery scrolling feature

Rasa bot encountering issues with bad requests and CORS proxy problems

Displaying the fields of the selected [object Object] in the console.log

Is it possible for a Vue.js build to encounter errors due to unregistered components?

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

Attempt the axios request again if the response is null or missing

Calculate the total value of each individual subject from the checkbox's data-id, presented in a string format and separated by commas

Harnessing the power of VUE.js: Exploring the versatility of V-bind with Array and

Refresh the current page with jQuery Mobile when it is clicked

Receiving a "Route not found" error even after specifying the route

AngularJS Multi-select Dropdown Filter Logic