retrieving multiple cookie values in a single cookie in javascript
<p>I had post this problem before, dealing with the shopping cart application. The application so far does everything that i would like it to do. I'm able to store and retrieve the cookies. But right now, my problem is extracting the individual values from the cookies and placing them into a table i have created. This is the format of the cookie when retrieved.
ItemName = quantity$price. what i am trying to do is retrieve the quantity and price values from the cookie, and display that data into my table. the cookie is being created in my store page, and then retrieved and displayed in my cart page. here is the code for my store page</p>

<p>store.html</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Store &lt;/title&gt;
&lt;h1&gt; My store &lt;/h1&gt;
&lt;script type="text/javascript"&gt;



function retr(circle)
{
var cke = document.cookie.split(';');
var nameCk= name + "=";
for(var i=0; i &lt; cke.length; i++)
{
var c = cke [i];
while (c.charAt(0)==' ') c = c.substring(1, c.length);
if (c.indexOf(nameCk) == 0) 
return c.substring(nameCk.length, c.length);
}
return null;
}
function createCookie() 
{
var exdate = new Date();
exdate.setDate(exdate.getDate() +10);
if (document.getElementById("circle").checked)
{
document.cookie = "Circle=" + document.getElementById("quantity1").value + document.getElementById("price1").value + ";expires="+exdate.toGMTString();
}
}



function retrieve() 
{
if (document.getElementById("circle").checked)
{
document.getElementById("ret").value = document.cookie;
}
}

function Calc()
{
var fpri = document.getElementById("price1").value;
var pri = fpri.substr(1);
var qty = document.getElementById("quantity1").value;
var spri = document.getElementById("price2").value;
var pri2 = spri.substr(1);
var qty2 = document.getElementById("quantity2").value;

if (document.getElementById("circle").checked)
{
document.getElementById("total").value ='$' + Number(pri) * 
Number(qty);
}
else
document.getElementById("total").value = '$' + Number(pri2) * 
Number(qty2);
}
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;table border = "1"&gt;
&lt;tr&gt;
&lt;td&gt; &lt;input type="checkbox" id="circle" /&gt; Circle &lt;/td&gt;
&lt;td&gt; &lt;img src="circle.jpg"&gt; &lt;/img&gt; &lt;/td&gt;
&lt;td&gt; Price: &lt;input type="text" size="4"   value = "$10.00" 
id="price1" name = "price1" /&gt;&lt;/td&gt;
&lt;td&gt; Quantity: &lt;input type="text" size = "4"  
id="quantity1"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;input type = "checkbox" id="stickman" /&gt; Stickman &lt;/td&gt;
&lt;td&gt; &lt;img src = "stickman.gif"&gt; &lt;/img&gt; &lt;/td&gt;
&lt;td&gt; Price: &lt;input type="text" size="4" value = "$5.00" 
id="price2" /&gt; &lt;/td&gt;
&lt;td&gt; Quantity: &lt;input type="text" size="4"  id="quantity2" /&gt; 
&lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;
&lt;br /&gt;
&lt;input type = "button" value = "Add to cart" 
onclick="createCookie()"&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;a href ="cart.html" &gt; View Cart &lt;/a&gt;
&lt;br /&gt; 
&lt;input type = "text" size = "8" id = "total" readonly = "readonly" 
/&gt; Total
&lt;br /&gt; 
&lt;input type = "button" id = "calcu" value = "calc" onclick = "Calc
()" /&gt;
&lt;input type = "button" value = "retrieve" onclick = "retrieve()" /&gt;
&lt;input type = "text" readonly = "readonly"  name = "ret" id = 
"ret"/&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the calculate and retrieve buttons, and the readonly text boxes are there just so i know the cookie is being stored and retrieved, and that i'm able to get the total, which will be displayed on my cart page.</p>

<p>here is the code for my cart page
cart.html</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Cart &lt;/title&gt;
&lt;h1&gt; My cart &lt;/h1&gt;
&lt;script type = "text/javascript"&gt;

function retr(circle)
{
document.getElementById("q2").value = document.getElementById("quantity1").value

}

function retrieve() 
{
var quvalue = retr("circle")
if (quvalue != false) {
document.getElementById("q2").value = quvalue
}
document.getElementById("ret").value = document.cookie;

}


&lt;/script&gt;
&lt;/head&gt;

&lt;body onload = "retrieve()"&gt;
&lt;table border = "1"&gt;
&lt;td&gt;Stickman &lt;/td&gt;
&lt;td&gt;&lt;input type = "text" size = "8" id = "q2" readonly = "readonly" /&gt;&lt;/td&gt; 
&lt;td id ="p1"&gt; price per &lt;/td&gt;
&lt;td id ="t1"&gt; total &lt;/td&gt;
&lt;tr&gt; &lt;/tr&gt;
&lt;td&gt; Circle &lt;/td&gt;
&lt;td&gt; quantity order &lt;/td&gt;
&lt;td&gt; price per &lt;/td&gt;
&lt;td&gt; total &lt;/td&gt;
&lt;tr&gt; &lt;/tr&gt;
&lt;td colspan = "3"&gt; TOTAL: &lt;/td&gt;
&lt;td&gt; total price &lt;/td&gt;
&lt;/table&gt; 
&lt;br /&gt; &lt;br /&gt;
&lt;input type ="text" id = "ret" readonly = "readonly" /&gt;
&lt;br / &gt; &lt;br /&gt;
&lt;input type = "button" value = "Checkout"&gt;
&lt;br /&gt; &lt;br /&gt;
&lt;a href = "store.html" &gt; Continue Shopping &lt;/a&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the values that are supposed to be retrieved in the table are invoked using the onload event attribute which is suppose to call the retrieve() function.</p>

<p>also, i understand that the way i created the table in my carts page isn't completely correct. but my main focus right now is to get the necessary values to be displayed in my table, then i will go back in rewrite my table code.</p>
