Submit data to an array on another page using JQuery and AJAX

Question

I have this form. At the moment, it submits to my cart.php .

<form action="cart.php?ID=<?=$row['id'];?>&salec=<?=$row['sale'];?>" 
       method="POST">

   <input type="hidden" name="hidden_name" value="<?=$row['title'];?>">

   <input type="hidden" name="hidden_price" value="<?=$row['price'];?>">

   <input type="hidden" name="hidden_list_price" value="<? 
   =$row['list_price'];>">

   <input type="hidden" name="collect" value="<?=$row['collection'];?>">

      <h4>Quantity</h4>

   <input type="text" name="quantity" value="1" maxlength="1" 
    class="quantity">

   <input type="hidden" name="himg" value="<?=$row['image'];?>">

   <input type="submit" class="button" name="cartbtn" value="Add to Cart">
</form>

It submits to this array that I have in my cart.php :

$_SESSION['shoppingcart'] = array (

        'salec' => filter_input(INPUT_GET, 'salec'),
        'id' => filter_input(INPUT_GET, 'ID'),
        'name' => filter_input(INPUT_POST, 'hidden_name'),
        'list_price' => filter_input(INPUT_POST, 'hidden_list_price'),
        'price' => filter_input(INPUT_POST, 'hidden_price'),
        'quantity' => filter_input(INPUT_POST, 'quantity'),
        'collect' => filter_input(INPUT_POST, 'collect'),
        'img' => filter_input(INPUT_POST, 'himg')

);

This works fine. I need to submit this form data to the cart.php array without the redirect (action).

I tried this jQuery and Ajax, but it is not working.

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#hidden_name").val();
        var price = $("#hidden_price").val();
        var list_price = $("#hidden_list_price").val();
        var quantity = $("#quantity").val();
        var img = $("#himg").val();
        var collect = $("#collect").val();

 $.ajax({
            type: "POST",
            url: "cart.php",
            data: dataString,
            cache: false,
            success: function(result){
                alert(result);
            }
 });

When I do this:

function pre_r($array){
    echo '<pre>';
        print_r($array);
    echo'</pre>';
}

pre_r($_SESSION) ;

It shows me that the data has not been added to the array. It doesn't redirect me - which is what I want - but it also doesn't add the info into the array. What am I doing wrong?

Answer 1

if the form works fine when submitted without ajax then you need to submit the form as it is in the Ajax block also:

$("#myform").on('submit', function(e){
    var form = $(this);
    $.ajax({
        type: form.attr('method'),
        url:  form.attr('action'),
        data: form.serialize(),
        cache: false,
        success: function(result){
            alert(result);
        }
    });
    e.preventDefault();
});

Answer 2

Hi I will try to help you .I will tell you im new in this industry so im still learning :) but i will start with : 1.changing that input type submit with type button. `` `$(document).ready(function(){

$("#myform").click(function(){
    var name = $("#hidden_name").val();
    var price = $("#hidden_price").val();
    var list_price = $("#hidden_list_price").val();
    var quantity = $("#quantity").val();
    var img = $("#himg").val();
    var collect = $("#collect").val();`

$.ajax({

        type: "POST",
        url: "cart.php",
        data: {
      name:name,
      price: price,
      list_price: list_price,
      quantity: quantity,
      img: img,
      collect: collect


     },
        cache: false,
        success: function(result){
            alert(result);
        }

});

See if you have some error into console hope this may help you ps if you want to make a post request with jquery you can do that in a easy way $.post( "cart.php", {name:name, price: price, list_price: list_price, quantity: quantity, img: img, collect: collect } );