Shopping Cart - "Catalog"

var Item = new Array("Panda", "Koala", "Dolphin", "Otter");

var Price = new Array(32, 16, 8, 4);

/*************** Cookie Functions ***************/

var thisCookie = document.cookie;

function getCookie(name) {
     var index = thisCookie.indexOf(name + "=");

     return unescape(thisCookie.substring(index, endstr));
}

function setCookie(name, quantity) {
     if (value != null && value != "") document.cookie = name + "=" + quantity;

     thisCookie = document.cookie;  // update thisCookie
}

function deleteCookie(name, path, domain) {
     if (getCookie(name)) {
          document.cookie = name + "=" +
          ((path) ? "; path=" + path : "") +
          ((domain) ? "; domain=" + domain : "") +
          "; expires=Thu, 01-Jan-70 00:00:01 GMT";
     }
}

/*************** End of Cookie Functions ***************/

// When we add an item we need to make a few checks
// & give the appropriate alert messages
function addCookie(name) {
     var quantity = document.orderForm[name].value;

     // Is the quantity a number?
     if (isNaN(quantity)) {
          alert("Please enter a Number");
          deleteCookie(name); // delete the cookie since it is invalid
          // reset the quantity value back to zero, & highlight the field.
          document.orderForm[name].value = 0;
          document.orderForm[name].focus();
          document.orderForm[name].select();
          return;
     }

     // take of the situation, ie, 01 make it 1
     if (quantity.length > 0 && quantity.charAt(0) == 0) quantity = quantity.substring(1);

     // Is there a quantity or is the quantity zero
     if (!quantity) alert("Nothing has been added to your Cart");
     // Is the quantity = 1
     else if (quantity == 1) {
          alert("Thank You!!\n" + "One " + name + " has been added to your Cart");
     }
     // Is the quantity greater than 1
     else alert("Thank You!!\n" + quantity + " " + name + "s" + " have been added to your Cart");

     if (!quantity) {
          deleteCookie(name); // delete item since it is zero or ""
          document.orderForm[name].value = 0; // reset the item quantity back to 0
     }
     else {
          document.orderForm[name].value = quantity;         
          setCookie(name, quantity);
     }
}

/*
Checks each Item cookie for its quantities & put the value in the quantity field. If the Item doesn't exist then make that quantity equal to zero.
*/
function upDate() {
     for (i = 1; i < Item.length; i++) {
          quantity = getCookie(Item[i]);
          if (!quantity) quantity = 0;
          document.orderForm[Item[i]].value = quantity;
    }
}

</SCRIPT>

The onLoad calls the upDate() function which "checks" all the Item cookies to see what the quantities are for the Items and put the appropriate values into their respective quantity fields.

<BODY onLoad="upDate();">

<FORM NAME="orderForm">

<TABLE BORDER="1" CELLPADDING="5">

<TR>
     <TD BGCOLOR="#336699">
          <FONT COLOR="#FFFFFF">Item Description</FONT>
     </TD>
     <TD BGCOLOR="#336699">
          <FONT COLOR="#FFFFFF">Quantity</FONT>
     </TD>
     <TD BGCOLOR="#336699">
          <FONT COLOR="#FFFFFF">Unit Price</FONT>
     </TD>
     <TD BGCOLOR="#336699">
          &nbsp;
    </TD>
</TR>
<TR>
     <TD>
          Panda
     </TD>
     <TD>
          <INPUT TYPE="text" NAME="Panda" VALUE="0" SIZE="3">
     </TD>
     <TD>
          $32
     </TD>
     <TD>
          <A HREF="javascript:addCookie('Panda');"
            onMouseOver="status='Add the Item to the Shopping Cart'; return true;"
            onMouseOut="status='';">
          <IMG SRC="images/addtocart.gif">
          </A>
     </TD>
</TR>

</TABLE>

</FORM>

<A HREF="checkout.htm"
  onMouseOver="status='Take Me to the Check Out'; return true;"
  onMouseOut="status='';">
<IMG SRC="images/checkout.gif">
</A>