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?

you have to event.preventDefault() . Right now your form is submitting, then the ajax is performed (probably not anymore, because you already 'redirect' to cart.php before the ajax) — Jeff
– Jeff, Commented Aug 4, 2018 at 22:52

Abdelhafid El Kadiri · Accepted Answer · 2018-08-04 23:12:30Z

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();
});

answered Aug 4, 2018 at 23:12

Abdelhafid El Kadiri

5922 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abdelhafid El Kadiri Over a year ago

make sure your form id="myform"

K.Doe Over a year ago

thanks for the answer but unfortunately, this does not work. I made sure the forms id ="myform". This succeeds in not redirecting me, but it also does not add the form data to the array.

charlietfl Over a year ago

@K.Doe Using serialize() will send exact same data as the original submit process. Inspect request in browser dev tools network to see if status is 200 and to see exactly what gets sent. Also does your alert fire?

K.Doe Over a year ago

@charlietfl hi, the code is 200(ok). It shows all of the correct form data, query parameters when the submit button is clicked. It just, for some reason, does not add the data to the array

K.Doe Over a year ago

@charlietfl oh yes, I get the alert as well

|

Adrian Lupu · Accepted Answer · 2018-08-04 23:11:20Z

Hi I will try to help you .I will tell you i m new in this industry so i m 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 } );

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related