Simple shopping cart using JavaScript Cookie

Question

I have following code to implement simple practice shopping cart using JavaScript. There is a checkout link which calls getcookie() to check the value of the cookies stored. When nothing is in the cookie then click on the link alerts to make input. If non of the values are entered in the input box and hit "add to cart" then validation is done and error message is alerted.

For some reason, the cookie is not taking the value from the input field. I tried quite a while now but was not able to debug the code. Just an empty alert box is shown at last. I appreciate any debugging. Thanks in advance.

<script type="text/javascript">
    var value;
    var productID;

    function setItem(abd) {
        value = abd.value;
        productID = abd.getAttribute("productID");
        var intRegex = /^\d+$/;
        var numberOfItems;
        if (!intRegex.test(value) || (value <= 0)) {
            alert('Please Enter valid numberofitem');
        } else {
            numberOfItems = value;
        }
    }
    function getCookie() {
        if (value == undefined) {
            alert("There is nothing in the shopping cart!");
        } else {
            var cookieArray = document.cookie.split(';');
            var printHolder = "";
            for (var i = 0; i < cookieArray.length; ++i) {
                var pairArray = cookieArray[i].split('=');
                alert(pairArray[0]);
            }
            alert(printHolder);
        }
    }
    function setCookie() {
        if (value == undefined) {
            alert("Please add number of items in text box");
        } else {
            document.cookie = productID + "=" + value + "; ";
            alert(value + " Product(s) with id " + productID +
                " has been added to shopping cart!");
        }
    }

</script>
<a href="javascript:getCookie()"> Checkout </a>
<input name="item-select" id="item-select"
       productid="p001"  style="width: 50px" onBlur="setItem(this)" >
<button type="button" onclick="setCookie()">Add to cart.</button>

The result I wanted is something like this at last!

Answer 1

This code works perfectly fine with some changes. I was using chrome and later found out that

Google Chrome doesn't create cookies when the file is on the local machine and loaded in browser directly using file path.

Rather try with localhost. It is definitely working when you put the code in server. Chrome became pain in a b*t here!

If you were for idea on creating shopping cart with Javascript follow this link. http://www.smashingmagazine.com/2014/02/create-client-side-shopping-cart/

Answer 2

Your getCookie is likely to give you incorrect results.

var cookiearray= document.cookie.split(';');
var toprint="";
for(var i=0; i<cookiearray.length; ++i) 
{ 
    var pairArray= cookiearray[i].split('=');
    alert(pairArray[0]);
}
alert(toprint);

Two things wrong here;

1) When you are in your for loop, each time you loop you are alerting the first item in your array at all times pairArray[0] you need to change that to pairArray[i]

2) You are displayed with an empty alert because thats what you have assigned to the toprint variable. - You assign toprint an empty string before your for loop, then you are alerting that variable without assigning it a new value, so you will be displayed with an empty alert box! - Also make sure your cookie array is not empty.

Give that a try, enjoy coding :)

Kush