AJAX post value is received as empty in PHP

Question

I'm trying to post values to another page and do some mysql operations but the values are posting as empty objects. This is my scripting part of the index.php file:

$(document).ready(function() {
    $("#picker").datepick();
    $('#picker').datepick('setDate', 'today');

    $('#submit').click(function() {
        var name = $("#name").val();
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: "new_prob_submit.php", 
            data: { 
                'date': $('#picker').val(), 
                'name': $('#name').val() 
            },
            success: function()    {
                alert("success");
            }
        }); 
    });
});

This is the PHP page where my posted values should be handled, new_prob_submit.php:

$rep_date = $_POST['date'];
$date = date("yyyy-mm-dd",strtotime($rep_date));
$name = $_POST['name'];
$sql = mysql_query("SELECT * FROM infra.prob_report WHERE prob_rept_name = '$name'");
$rows = array();
while($row = mysql_fetch_array($sql)) {
    $nestedData=array(); 
    $nestedData[] = $row["rep_id"];
    $nestedData[] = $row["prob_rept_date"];
    $nestedData[] = $row["prob_equip_name"];
    $nestedData[] = $row["prob_rept_name"];
    $nestedData[] = $row["prob_desc"];
    $data[] = $nestedData;
}
echo json_encode($data);

Answer 1

Problem is you have not used

dataType:"json" in your ajax .

 $.ajax({
            type: "POST",
            url: "new_prob_submit.php", 
            //added type
            dataType:"json",
            data: { 
                'date': $('#picker').val(), 
                'name': $('#name').val() 
            },
            success: function()    {
                alert("success");
            }
        });

Please check Ajax

Answer 2

 $.ajax({
                type:"POST",
                url: "new_prob_submit.php", 
                data: { 
                    'date': $('#picker').val(), 
                    'name': $('#name').val() 
                },
                dataType: "json",
                success:function(data){
                     alert(data);
                }
            });

Answer 3

You are using type: 'POST' which is not correct, it must be method: 'POST' in your $.ajax object. make sure console.log($('#picker').val(), $('#name').val() ) getting values in console.

Read more here

Answer 4

Add this to you script processData: true, like

  $.ajax({url: "submit.php",
       data: values,
       method: 'POST',
       processData: true,
       success: function (data) {
       alert(data);}});