Q:

Updating Product Count using Plus, Minus button without refreshing page JavaScript

How can I update product Count in a custom PHP shopping cart that I am working on,  using Plus, Minus button without refreshing page?
I would like to add or delete quantity without reloading page.
My products in the cart are listed as below.

Burger $3.99
Pasta Bowl $8.99

I would like to have a image button to increase or decrease the quantity like below. The option to increase and decrease should display when you click on the plus or minus sign.

1 Burger $3.99
2 Pasta Bowl $17.98

Thanks,
Raj

A:

As webgal suggested, AJAX is the way forward. Have the plus/minus buttons calling a function, say updateQuantity(direction) where direction is up or down (depending on the button clicked. So, the plus button will call updateQuantity(1) and the minus button will call updateQuantity(-1) and use that value to manipulate the object's quantity in the cart.
Simple AJAX code (which you'll simply need to tailor to your own need) will be as follows:
function updateQuantity(direction){
   var xmlhttp;

   if(window.XMLHttpRequest){
        // For new browsers and IE7+
        xmlhttp=new XMLHttpRequest();
        console.log('created XMLHttpRequest');
   }else{
        // For old IE versions (volatile)
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        console.log('created ActiveXObject');
   }

   xmlhttp.onreadystatechange=function(){
       if(xmlhttp.readyState==4 && xmlhttp.status==200){
           //if the AJAX call is finished and the HTTP status is 200 (OK)
           console.log('response received');
           var e = document.getElementById('theElementYouWantToChange');
           e.innerHTML = xmlhttp.responseText;
       }else if(xmlhttp.readyState==4 && xmlhttp.status!=200){
       //second if condition specified, else the console will log an error
       //whenever the readystate changes, and this happens 3 times during
       //an acceptable AJAX call    
           console.log("Error retrieving search response. Status: "+xmlhttp.status);
        }
    }

    xmlhttp.open("GET","includes/updateCart.php?product="+productID+"&change="+direction,true);
    xmlhttp.send();
}

You will need to set up the variable productID which attaches to the product you are modifying the quantity of

