Trouble Understanding $.ajax() Parametres to get PHP Variable

Question

Yesterday I asked about connecting HTML, Javascript and PHP with sessions.

I was advised to use $.ajax(), but I'm having trouble figuring out how to get it working.

To start off with I have a HTML file:

<?php session_start(); ?> <!-- This is on the first line of the page -->
...
<form id="formexample" method="post" action="cart.php">
<select name="formexample1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select  name="formexample2">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<button type="button" onclick="addToCart()">Add to Cart</button>
</form>
<div class="test"></div>

I have this in a separate, inlcuded PHP file: cart.php

<?php   

session_start(); 
$PHPtest = 1;
echo json_encode($PHPtest);
/* 
$_SESSION['cart'][$_POST['formexample1']] = $_POST['formexample1'];
$_SESSION['cart'][$_POST['formexample1']][$_POST['formexample2']] = [$_POST['formexample2']] 

*/
?>

My goal is to access the $_SESSION variable in my Javascript, but for the moment I'm trying to do get it to work with $PHPtest first.

In the Javascript I have this:

function addToCart()
{
    var test;
    $.ajax(
    {
        url:"cart.php",
        type:"post",
        data: data,
        success:function(PHPtest) 
        {
            test = $.parseJSON(PHPtest);
            console.log(test); //sends the response to your console
        },
        error:function() 
        {
            console.log("Error");
        }
    });
    alert(test);
}

To see how I got to this point, see the thread from yesterday (linked at the top of the page) and the discussion under Josh S's answer. I'm trying to get $.ajax() to work, but without success. I've been looking at online examples and have been trying to write the same format, but nothing I try seems to work.

Thanks in advance.

EDIT:

This is what I have now:

    var test;
    $.ajax(
    {
        url:"cart.php",
        type:'post',
        data: 'test',
        datatype: 'json'
        success:function(PHPtest) 
        {
            test = $.parseJSON(PHPtest);
            alert(test);
            console.log(test); //sends the response to your console
        },
        error:function() 
        {
            console.log("Error");
        }
    });

EDIT 2

I finally figured out how to send $PHPtest to Javascript. I wrote:

$.get( "cart.php", function( PHPtest ) {
test = PHPtest;     
alert(test);
        });

My PHP remains:

<?php   

/* session_start();*/ 
$PHPtest= "test";
echo json_encode($PHPtest);
?>

It works for various values of PHPtest. As far as I can tell taking out "json_encode" between "echo" and "$PHPtest" makes no difference.

EDIT 3

Here's what I have now.

HTML: This is in a file "bookings.php". ... Option 1 Option 2 Option 1 Option 2 Add to Cart

Javascript:

function addToCart()
 {
    var test;
    get( "cart.php", function(PHPtest) 
    {
    test = PHPtest;
    alert(test);
    });
}

PHP: External PHP file, "cart.php":

<?php   

    /* session_start();*/
        $PHPtest= "Example";
        echo json_encode($PHPtest);
        if(isset($_POST))
        {
             $_SESSION['cart']['0'] = $_POST['formexample1'];
        }
?>

The alert shows:

"Example"
Notice: Undefined index: formexample1 in (directory) on line 8

The same text appears in the top left of the page, even if I comment out the "$.get()".

EDIT 4

I'm trying to extract a single PHP variable, $PHPtest, with AJAX. I'm also trying to retrieve POST information correctly.

HTML:

<?php session_start(); ?> <!-- This is on the first line of the page -->
...
<form id="bookingform" method="post" action="cart.php">
<select name="day">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select  name="time">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<button type="button" onclick="addToCart()">Add to Cart</button>
</form>

Javascript:

function addToCart()
{
        $("#bookingform").submit();
        var test;
        $.get( "cart.php", function(PHPtest) {
        test = PHPtest;
        alert(test);
        });
}

cart.php:

session_start();
    $PHPtest = "Test";
    $PHPtest = "Test2";
    echo json_encode($PHPtest);
    echo json_encode($PHPtest2);

    if(isset($_POST['day']))
    {
        /*$PHPtest3 = "test3"
        $_SESSION['cart']['0'] = $_POST['day'];
        echo json_encode($PHPtest3);
        echo json_encode($_POST['day']);*/

    }

As it is, the alert produces

> "Test""Test2"

Uncommenting the "isset" in cart.php changes the alert to:

    <br />
<b>Parse error</b>: syntax error, unexpected '$_SESSION' (T_VARIABLE) in <b>(directory)</b> on line <b>14</b><br />

Line 14 is the line with "$_SESSION['cart']['0'] = $_POST['day'];".

Answer 1

With so many edits it's hard to tell where you stand with this. So let's work backwards and figure this out.

Edit 3

You're getting this error because you're not actually posting anything. The $_POST is always going to be set. So your check for it is giving you a false positive. You're instead going to want to do something like this:

<?php   
  session_start();
  if (isset($_POST['formexample1'])) {
    $_SESSION['cart']['0'] = $_POST['formexample1'];
  }

Edit 2:

You had it right in the first place. You're actually looking to POST data to the backend. That's the way it seems from cart.php, at least. If you want to skip using the whole $.ajax() call then you can look into jQuery post.

Edit 1:

...
    url:"cart.php",
    type:"post",
    data: data,
 ...

I don't see where your data object is coming into play. Javascript will let you throw around undefined variables. jQuery will silently handle them for you. This may instead be helpful to you.

...
    url:"cart.php",
    type:"post",
    data: { 
      "formexample1" : $('select[name="formexample1"]').val(),
      "formexample2" : $('select[name="formexample2"]').val()
    }
...

That should help you get back the results you're looking for. Let me know if it doesn't.