How to fill a div without page reload

Question

I want to reload a div when i press the button with class testbutton but my post isn't recognized for adding a product in add_product.php . I'm not sure if this is the right solution for my problem. Any help is really appreciated. The idea is that when adding a product the page won't refresh only the div.

What i'm trying to do now:

1. Homepage.php is loading all my products through:

   $("#results").load("products.php", {'page':0}, function() {$("#1-page").addClass('active');}); 
   

2. In products.php it is loading my add to cart script by this code:

   $(".fillthisdiv").load("add_product.php");
   

3. My add_product.php isn't recognising thie post so its impossible to add products

   $_POST['pid'];
   

4. The added products are displayed by

    if (isset($_SESSION['cart_array'])){
             if ($_SESSION['cart_array'] != NULL){
                 echo $cart_output_bestellijst;
             }
    }
   

Homepage.php

session_start();
include "scripts/connect_to_mysql.php"; 

// This loads a list with all products and show it in #results div 
 $(document).ready(function($) {
 $("#results").load("products.php", {'page':0}, function() {$("#1-page").addClass('active');}); 
});

// Displaying all products
<div id="results"></div>

// This Div should only show the added products
<div class="fillthisdiv"></div>

Products.php

session_start();
include("../connect_to_mysql.php"); //include config file

product_list = "";

while($row = mysql_fetch_array($results)){ 
         $id = $row["id"];
         $product_name = substr($row["product_name"],0,25);
         $price = $row["price"];
         $product_list .= "<form id='form1' name='form1' method='post' action=''>   
                           <div class='product>
                           <span class='prijs-info'>Price:</span><span class='prijs'><label id='costLabel' name='costLabel'>$price</label>  </span>
                           <span class='productnaam'>$product_name</span>
                           <input type='hidden' name='pid' id='pid' value='$id' />
                           <input type='submit' name='button' id='button' class='testbutton' value='' onclick='return false' />
                           </form>
                           </div>
                           ";                  
}

echo $product_list;

// This script will fill the div class fillthisdiv with added products.

<script type="text/javascript">
$(document).ready(function($) {
$('.testbutton').click(function(){
    $(".fillthisdiv").load("add_product.php");
   });
});
</script>

add_product.php

session_start();
include("../connect_to_mysql.php"); //include config file

if (isset($_POST['pid'])) {
$pid = $_POST['pid'];
$wasFound = false;
$i = 0;
// If the cart session variable is not set or cart array is empty
if (!isset($_SESSION["cart_array"]) || count($_SESSION["cart_array"]) < 1) { 
    // RUN IF THE CART IS EMPTY OR NOT SET
    $_SESSION["cart_array"] = array(0 => array("item_id" => $pid, "quantity" => 1));
} else {
    // RUN IF THE CART HAS AT LEAST ONE ITEM IN IT
    foreach ($_SESSION["cart_array"] as $each_item) { 
          $i++;
          while (list($key, $value) = each($each_item)) {
              if ($key == "item_id" && $value == $pid) {
                  // That item is in cart already so let's adjust its quantity using array_splice()
                  array_splice($_SESSION["cart_array"], $i-1, 1, array(array("item_id" => $pid, "quantity" => $each_item['quantity'] + 1)));
                  $wasFound = true;
              } // close if condition
          } // close while loop
       } // close foreach loop
       if ($wasFound == false) {
           array_push($_SESSION["cart_array"], array("item_id" => $pid, "quantity" => 1));
       }
}

}

$cartTotal = "";
if (isset($_SESSION['cart_array'])){
if ($_SESSION['cart_array'] != NULL){
    $cart_output_bestellijst = '';
    // Start the For Each loop
    $i = 0; 
    foreach ($_SESSION["cart_array"] as $each_item) { 
        $item_id = $each_item['item_id'];
        $sql = mysql_query("SELECT * FROM products WHERE id='$item_id' LIMIT 1");
        while ($row = mysql_fetch_array($sql)) {
            $product_name = $row["product_name"];
            $price = $row["price"];

        }

        $cart_output_bestellijst .= '$product_name . " " . $price';
        $i++; 
 }                 
}
}

            echo "<h3>The added products</h3>";
            if (isset($_SESSION['cart_array'])){
              if ($_SESSION['cart_array'] != NULL){
                  echo $cart_output_bestellijst;
              }
            }

Answer 1

You are not sending variables through a form so there is no $_POST variable present. There are other ways to handle this scenario but in your case change

$(".fillthisdiv").load("add_product.php"); to

$(".fillthisdiv").load("add_product.php?id=$id");

and use $_GET to grab that value.