I create a form with hidden input forms that submit the value to a PHP script and store each value in an array of sessions by reloading the page with AJAX. It returns an HTML success alert message to . I need help on how to send $count to  and success alert message to  at the point of success: in AJAX. And also I will like the success alert to disappear after 3 seconds of the display. Below is my code:

my_add_cart.php

<?php 
 session_start();

     $_SESSION['title'][]=$_POST['title'];
     $_SESSION['price'][]=$_POST['price'];
     $_SESSION['img_src'][]=$_POST['img_src'];
     
        $count = count($_SESSION["title"]);
echo $count;
     echo '<div >
  <span  onclick="this.parentElement.style.display=\'none\';">&times;</span> 
  <center>Product added successfully to cart.</center>
</div>';
exit();
?>

Above is my_add_cart.php and below is my HTML and javascript:


<script type="text/javascript">

function clickButton(){
    var title=document.getElementById('title').value;
    var price=document.getElementById('price').value;
    var img_src=document.getElementById('img_src').value;
   
    $.ajax({
        type:"post",
        url:"my_add_cart.php",
        data: 
        {  
           'title' :title,
           'price' :price,
           'img_src' :img_src
        },
        cache:false,
  
        success: function (html) 
        {
           $('#msg').html(html);
           
        
        }
        
    });
    return false;
 }
</script>

<html>
   <p id="msg"></p>
   <p id="count"></p>
       
<form onsubmit="clickButton()">

<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >

<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >

<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" name = "img_src" id="img_src">
                                        
<button type="submit" id="add_to_cart" name="add_to_cart"  value="Add to cart" onclick="return clickButton();">Add Cart</button>
  
</form>

</html>

CodePudding user response：

I Suggest turning your server code into a json api

Solution

change my_add_cart.php to this

<?php 
     session_start();
    $_SESSION['title'][]=$_POST['title'];
    $_SESSION['price'][]=$_POST['price'];
    $_SESSION['img_src'][]=$_POST['img_src']; 
    $count = count($_SESSION["title"]);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode(
        [
            'count' => $count,
            'message' => '<div ><span  onclick="this.parentElement.style.display=\'none\';">&times;</span> <center>Product added successfully to cart.</center></div>';
        ]
    );
    exit();
?>

change your frontend code to this


<script type="text/javascript">

function clickButton(){
    var title=document.getElementById('title').value;
    var price=document.getElementById('price').value;
    var img_src=document.getElementById('img_src').value;
   
    $.ajax({
        type:"post",
        url:"my_add_cart.php",
        data: 
        {  
           'title' :title,
           'price' :price,
           'img_src' :img_src
        },
        cache:false,
  
        success: function (data) 
        {
           $('#msg').html(data['message']);
           $('#count').html(data['count']);        
        }
        
    });
    return false;
 }
</script>

<html>
   <p id="msg"></p>
   <p id="count"></p>
       
<form onsubmit="clickButton()">

<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >

<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >

<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" name = "img_src" id="img_src">
                                        
<button type="submit" id="add_to_cart" name="add_to_cart"  value="Add to cart" onclick="return clickButton();">Add Cart</button>
  
</form>

</html>