How to get Array values from jquery-ajax formData to php

Question

I am trying to pass an input field which has its values to be in an array with some other input fields into PHP using jquery-Ajax formData, everything seems to work fine except that I am having problems with successfully passing the array values and I have tried a whole lot which without evident success.

firstly i tried SerialiseArray() method. Here is my code below

 <form>
 //other input field below...
  .
  .
  .
//this is the code to include my array which is in _categories-list.php
<div class="form-group">
<label for="artist">Select Categories </label>
<?php include('../_categories-list.php') ?>
</div>    </form>

  var Category = $('#categoriesList').serializeArray();
  $.each( Category,function(i,field){
  formData.append('categoriesList', field.value + "");
                               });
   $('.msg').text('Uploading in progress...');
         ajaxcall =       $.ajax({
                    url: 'page-videoFunc.php',
                    data: formData, 
                    processData: false,
                    contentType: false,
                    type: 'POST',});

This particular method I used only sends one value of the chosen options in the array. example:

//output: let's say the person chooses blues, hip-hop
hip-hop //will be the only value sent

I also tried another method similar

<form>
 //other input field below...
  .
  .
  .
//this is the code to include my array which is in _categories-list.php
<div class="form-group">
<label for="artist">Select Categories </label>
<?php include('../_categories-list.php') ?>
</div>  </form>

  var Category = $('#categoriesList').serializeArray();
  formData.append('categoriesList', Category);//note that code changes here from the above method used
   $('.msg').text('Uploading in progress...');
         ajaxcall =       $.ajax({
                    url: 'page-videoFunc.php',
                    data: formData, 
                    processData: false,
                    contentType: false,
                    type: 'POST',});

This one sends all the values of the array that is chosen but sends but as an object example:

//output
[object object] [object object]

And lastly, I tried this: serialize();

<form>
 //other input field below...
  .
  .
  .

//this is the code to include my array which is in _categories-list.php
<div class="form-group">
<label for="artist">Select Categories </label>
<?php include('../_categories-list.php') ?>
</div>  </form>

  var Category = $('#categoriesList').serialize(); //Note i used just serialize() here
  formData.append('categoriesList', Category);
   $('.msg').text('Uploading in progress...');
         ajaxcall =       $.ajax({
                    url: 'page-videoFunc.php',
                    data: formData, 
                    processData: false,
                    contentType: false,
                    type: 'POST',});

Which partially works and sends all the values but in a format i seem not to get a way to get the values out, example:

 //output
 categoriesList%5B%5D=blues&categoriesList%5B%5D=hip-hop

I don't know how to get only the values from the query strings in this method so I could put it into the database

Please help me provide a solution to any of the above method I am using, I have worked on this nearly 42 hours and its slowing down my project

Answer 1

After using parse_str to cut off added URL to serialized data, to get all values of the array, you should do this:

 parse_str($_POST['name'], $output);
  $x = $output["name"];
  foreach ($x as $key => $value) {
   echo $value;
      }

Answer 2

call the ajax like.

var Category = $('#categoriesList').serialize();
$.ajax({
                    url: 'page-videoFunc.php',
                    type: 'post',
                    data:{
                         action:'update_data',
                         form_data:Category 
                     },

});

In page-videoFunc.php file, parse the form_data using parse_str.

if($_POST['action'] =='update_data'){
parse_str($_POST['form_data'], $my_form_data);
echo "<pre>";
print_r($my_form_data);
}