Ajax data isn't being received by php

Question

Hello overflowers!

I can't seem to manage to send my ajax data over to my php page correctly, it has worked perfectly fine before but now it is not working.

I'm getting the correct data via console.log but on my php page i'm getting Undefined index error.

Jquery

  var task_takers_pre = [];
  var task_takers = [];
  var i = 1;

  $(".new-task-takers ul.select_takers li").on('click', function(){
    $(this).each(function(){
      $(this).toggleClass("active");
      if($(this).find('.fa').length > 0){
        $(this).find('.fa').remove();
        i -= 1;
        var removeItem = $(this).data("id");
        task_takers_pre.remove(removeItem);
        console.log(task_takers_pre);
      }else{
        $('<i class="fa fa-check" aria-hidden="true"></i>').insertBefore($(this).find("div"));
        i += 1;
        task_takers_pre[i] = $(this).data("id");
        console.log(task_takers_pre);
      }

      $.each(task_takers_pre, function (index, value) {
        if ($.inArray(value, task_takers) == -1) {
          task_takers.push(index, value);
        }
      });
    });
  });

  $("#new-task").on('submit', function(){
    console.log(task_takers_pre);
    $.ajax({
      type: 'POST',
      url: '',
      cache: false,
      data: {task_takers_pre : task_takers_pre },
      success: function(data) {
        //console.log(data)
      }
    });
  });

PHP

if(isset($_POST['task_submit'])){
    $task_takers = $_POST['task_takers_pre'][0];
    var_dump($task_takers);
}

---

EDIT

jQuery

var task_takers_pre = [];
  var task_takers = [];
  var i = 1;

  $(".new-task-takers ul.select_takers li").on('click', function(){
    $(this).each(function(){
      $(this).toggleClass("active");
      if($(this).find('.fa').length > 0){
        $(this).find('.fa').remove();
        i -= 1;
        var removeItem = $(this).data("id");
        task_takers_pre.remove(removeItem);
        console.log(task_takers_pre);
      }else{
        $('<i class="fa fa-check" aria-hidden="true"></i>').insertBefore($(this).find("div"));
        i += 1;
        task_takers_pre[i] = $(this).data("id");
        console.log(task_takers_pre);
      }

      $.each(task_takers_pre, function (index, value) {
        if ($.inArray(value, task_takers) == -1) {
          task_takers.push(index, value);
        }
      });
    });
  });

  $(".assign").on('click', function(){
      console.log(task_takers_pre);
      $.ajax({
        type: 'POST',
        url: './core/includes/new_task.php',
        cache: false,
        data: {task_takers_pre : task_takers_pre},
        success: function(data) {
          //console.log(data)
        }
      });
      $.ajax({
        type: 'POST',
        url: '',
        cache: false,
        data: {'task_takers_pre' : task_takers_pre},
        success: function(data) {
          //console.log(data)
        }
      });
    });

PHP

if(isset($_POST['task_takers_pre'][0])){
    $task_takers = $_POST['task_takers_pre'][0]; // Just for testing
    var_dump($task_takers);                      // Just for testing
}

if(isset($_POST['task_takers_pre'])){
    $task_takers2 = $_POST['task_takers_pre']; // Just for testing
    var_dump($task_takers2);                      // Just for testing
}

Answer 1

What you are attempting to do is use the same PHP code to handle the Button Press from the Form AND the AJAX Call. Don't!

(note: This answer is Only based upon the code that has been provided and what is trying to achieved with this code.)

So your current PHP is, which I am guessing is what you call when you click the submit button... In that case $_POST['task_takers_pre'] will not exist as you are generating that from the JS and sending it in the AJAX Call.

Write a separate AJAX Call.

You need to create a separate file to handle your AJAX calls and have it perform what duties it needs to perform.

// This is just for testing my AJAX Call
    public function ajax_post(){
      if(isset($_POST['task_takers_pre'])){
        $task_takers = $_POST['task_takers_pre'][0]; // Just for testing
        var_dump($task_takers);                      // Just for testing
        die();
      }
      else {
      // Illegal access/entry do something...
      echo 'Error - I had better check what I am posting.';
      die();
      }
    }

Answer 2

If you juse want to send some data in the AJAX Call when you click the submit button,you could return false to prevent form submission in the submit event.

 $("#new-task").on("submit", function(){ $.ajax({ type: "POST", url: "", cache: false, data: {task_submit:1, task_takers_pre: task_takers_pre}, success: function(data){ console.log(data); } }); return false; });