Cannot retrieve serialized checkbox array data in PHP from ajax send

I am having difficulty retrieving my checkbox array data in my called PHP from an ajax send of a serialized form. I can call up all of the other form fields, but not the checkbox array. Can anyone help? I'm pulling my hair out here. :(

My Form:

<form id="registration" method="POST" action="">
 <input type="text" id="pFirst" name="pFirst" class="form-control" placeholder="First">
 <input type="text" id="pLast" name="pLast" class="form-control" placeholder="Last">
 <input type="checkbox" name="class[]" value="1">
 <input type="checkbox" name="class[]" value="2">
 <input type="checkbox" name="class[]" value="3">
 <input type="checkbox" name="class[]" value="4">
 <button type="submit">Register</button>
</form>

My ajax:

function OnSubmit(form){
  $.ajax({
  url:'processRegistration.php',
  type:'post',
  data: $(form).serializeArray(),
  success:function(response){
    var msg = "";
    if(response == "1"){
      msg = "Registration Received";
    }else{
      msg = "Sorry, something went wrong. Please contact the Web Admin.";
    }        
    //alert(msg); 
    alert(response);   
  }
  });
}

My PHP receiver:

echo $_POST['pFirst'].', '.$_POST['pLast'].', '.$_POST['class'];

In my Ajax, I alerted the response so I could see what is returned. If I leave the echo in the receiver the way I show it in my code, I get the error "Undefined array key 'class'". If I leave the $_POST['class'] off, I get the first and last names. I also looked at this solution:Send array with checked Checkbox value and retrieve as string in php but it uses JSON.stringify() and I want to keep the form data in URL encoded format.

What I need to happen is to be able to access the checked checkboxes passed by the serialized form while still being able to call up each passed form field as a $_POST item.

Solution

Looking at your instructions I think it should be possible to get the data you want directly through the use of $_POST['class'] directly in php, but you say it's not possible, so I can provide you with an idea of how to check this and you can try it.

First you need to print the result of your serializeArray() method to make sure you are transferring out the correct data:

    $(document).ready(function () {
        $("#registration").on("submit", function (event) {
            console.log($(this).serializeArray());
            event.preventDefault();
        });
    })

<head>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
</head>

<form id="registration" method="POST" action="">
    <input type="text" id="pFirst" name="pFirst" className="form-control" placeholder="First">
    <input type="text" id="pLast" name="pLast" className="form-control" placeholder="Last">
    <input type="checkbox" name="class[]" value="1">
    <input type="checkbox" name="class[]" value="2">
    <input type="checkbox" name="class[]" value="3">
    <input type="checkbox" name="class[]" value="4">
    <button type="submit">Register</button>
</form>

You can also directly use the F12 tool to view the data sent out by ajaxenter image description here

If the outgoing data is fine, then it's received in php, and you can pass the

var_export($_POST);die();

To confirm all the post data array, you will see that one of the key is class, his value is an array, that inside is the value of all your checked checkbox, he is probably like this:

array (
   'pFirst' => '123',
   'pLast' => '123',
   'class' => 
        array (
            0 => '3',
            1 => '4',
        ),
 )