CODEWITHSUNDEEP
phphtmlformspost
pillarman38
pillarman38

Reputation: 57

How do I post on another page without the current one refreshing?

I'm building a shopping cart. I would like it so that every time a person hits submit to add an item to their cart it adds the item but it stays on the current page without refreshing. Then if they click on the cart icon it will bring them to a separate page where their items are. With the PHP below, I can submit items and they will show in the cart page but the submit button still refreshes the shopping page.

<?php
session_start();
$connect = mysqli_connect("localhost", "root", "root", "tut");
if(isset($_POST["add"]))
{
  if(isset($_SESSION["cart"]))
  {
    $item_array_id = array_column($_SESSION["cart"], "product_id");
    if(!in_array($_GET["id"], $item_array_id))
    {
      $count = count($_SESSION["cart"]);
      $item_array = array(
      'product_id' => $_GET["id"],
      'item_name' => $_POST["hidden_name"],
      'product_price' => $_POST["hidden_price"],
      'item_quantity' => $_POST["quantity"]
      );
      $_SESSION["cart"][$count] = $item_array;
      echo '<script>window.location="index.php"</script>';
    }
    else
    {
      echo '<script>alert("Products already added to cart")</script>';
      echo '<script>window.location="index.php"</script>';
    }
  }
  else
  {
    $item_array = array(
    'product_id' => $_GET["id"],
    'item_name' => $_POST["hidden_name"],
    'product_price' => $_POST["hidden_price"],
    'item_quantity' => $_POST["quantity"]
    );
    $_SESSION["cart"][0] = $item_array;
  }
}
if(isset($_GET["action"]))
{
  if($_GET["action"] == "delete")
  {
    foreach($_SESSION["cart"] as $keys => $values)
    {
      if($values["product_id"] == $_GET["id"])
      {
        unset($_SESSION["cart"][$keys]);
        echo '<script>alert("Product has been removed")</script>';
        echo '<script>window.location="thebag.php"</script>';
      }
    }
  }
}
?>

  <div id="mainform">
  <div id="form">


            <form method="post" action="index.php?action=add&id=<?php echo $row["id"]; ?>" id="myForm">
            <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
            <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>

            <input type="hidden" name="quantity" class="form-control" value="1">
            <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
            <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
            <input type="submit" name="add" value="Submit">


</form>
</div>
</div>

Upvotes: 1

Views: 697

Answers (2)

Evan Sims
Evan Sims

Reputation: 93

You'd need to make the request using JavaScript, rather than a traditional form element. JS allows you to make asynchronous requests to your server without refreshing the user's page using a technique known as "AJAX." Here's an example of that using jQuery, for simplicity sake:

$(document).ready(function () {
    $('form.addToCart').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),

            success: function (data) {
                alert("Item added to cart!");
            },

            error: function (jxhr, text, error) {
                alert(error);
            }
        });
    });
});

(Note that you don't have to use jQuery to make these sorts of asynchronous requests, but it's helpful for resolving inconsistencies between different browsers your visitors might use.)

Ensure all of your form tags have the class "addToCart", for example:

<form class="addToCart" action="..." method="post"> ...

Upvotes: 1

Faizan Amin
Faizan Amin

Reputation: 458

You can use ajax to submit a form. Use ajax to submit form and prevent page load

You can use onForm submit method

Like:

$("#myForm").submit(function(e){
e.preventDefault();
    $.ajax({
            url:'action.php',
            type:"POST",
            data:$("#myForm").serialize(),
            success:function(data){
                $("#snackbar").html(data);
                show_snakbar()
            }

    });
});

You can customize it using your values

Upvotes: 0

Related Questions