...

View Full Version : problems with cookies



needhelp101
03-16-2012, 05:20 AM
I am creating a shopping cart application that stores and retrieves cookies. I have two pages created. the first page has a table containing two rows, in which the user checks that item, and enters in the quantity. after the user selects one or both items and enters in the quantity, they click the button Add to cart, which stores this as a cookie. when the user clicks the view cart link, it brings them to view what they ordered in a table. my problem is, when the user clicks on the view cart link, how do i get the table to be displayed as the item name in the first column, the quantity in the second column, price in the third column, and the total for that item in the last column? here is the code for both my pages


<html>

<head>
<title> Store </title>
<h1> My store </h1>
<script type="text/javascript">
function setCookie()
{
var exdate = new Date();
exdate.setDate(exdate.getDate() +10);
document.cookie = "price="+ document.getElementsByName("Price")[0].value + ";expires="+exdate.toGMTString();
}

function retrieve()
{
document.getElementsByName("fullName")[0].value = document.cookie;
}

function Calc()
{
if (document.getElementById("calcu")){
var pri = document.getElementById("price").value;
var qty = document.getElementById("quantity").value
Total(pri,qty)
}
}
function Total(pri, qty)
{
var pri = document.getElementById("price").value
var qty = document.getElementById("quantity").value

if (document.getElementById("circle").checked) {
document.getElementById("total").value = pri * qty
}
}
functino load()
{
document.getElementById("circle")
}
</script>

</head>

<body>
<table border = "1">
<td> <input type="checkbox" id = "circle"> Circle </td>
<td> <img src="circle.jpg"> </td>
<td> Price: <input type = "text" size = "4" name = "price" />$ </td>
<td> Quantity: <input type = "text" size = "4" id = "quantity"/> </td>
<tr> </tr>
<td> <input type = "checkbox"> Stickman </td>
<td> <img src = "stickman.gif"> </td>
<td> Price: <input type = "text" size = "4" value = "$" id = "price" /> </td>
<td> Quantity: <input type = "text" size = "4" id = "quantity" /> </td>
</table>
<br />
<input type = "button" value = "Add to cart">
<br />
<br />
<a href ="cart.html" onclick = "retrieve()"> View Cart </a>
<br />
<input type = "text" size = "8" id = "total"readonly = "readonly" /> Total
<br />
<input type = "button" id = "calcu" value = "calc" onclick = "Calc()" />

</body>
</html>





<html>
<head>
<title> Cart </title>
<h1> My cart </h1>
<script type = "text/javascript">
function retrieve()
{
document.getElementsByName("price")[0].value =

document.cookie;
}
</script>
</head>

<body>
<table border = "1">
<td> Stickman </td>
<td> <script type = "text/javascript">document.getElementById

("price") </script> </td>
<td> price per </td>
<td> total </td>
<tr> </tr>
<td> Circle </td>
<td> quantity order </td>
<td> price per </td>
<td> total </td>
<tr> </tr>
<td colspan = "3"> TOTAL: </td>
<td> total price </td>
</table>
<br /> <br />
<script type="text/javascript">document.write(retrieve("price"));

</script>
<br / > <br />
<input type = "button" value = "Checkout">
<br /> <br />
<a href = "store.html"> Continue Shopping
</body>
</html>


for this code, where it says quantity ordered, its supposed to display the quantity the user entered. price per is displaying the price, and where it says total, the total of that item.

sunfighter
03-16-2012, 07:50 PM
If your doing this to learn then OK, but if your going to be messing with peoples money I suggest you first learn to code before making a shopping cart.

You don't have a table coded correctly. It should be:


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

Notice how the rows (<tr>) are done.
Also notice how I used IDs.

Your code never puts cookies on my machine. I have found that when something is wrong in the <script type="text/javascript"> tag Nothing works and that is the case here: This line:

functino load()is wrong!

I have made a function to replace your CalcIt() function, but this is only for the first row (the circle):

function CalcIt()
{
var fpri = document.getElementById("price1").value;
var pri = fpri.substr(1);
var qty = document.getElementById("quantity1").value;
document.getElementById("total").value = Number(pri) * Number(qty);
}

Please work on your first script and get that working, then repost.

needhelp101
03-16-2012, 08:16 PM
ok, thank you very much for your reply. I will continue to work on my code. And no, this is not meant to mess with peoples money. this is for me to learn. and my load function, i was attempting to use it to display the displays in my cart page because on the cart page, there is supposed to be another table that is loaded and has the item name, the price, the quantity, and the total price for that item.

sunfighter
03-16-2012, 09:28 PM
The load function has a spelling mistake

functino load()
should be

function load()

If I came across as harsh, I apologize. We're here to help so Take things step by step and if you have problems ask.

needhelp101
03-16-2012, 11:16 PM
with my load function, i recognized the spelling mistake. that was on my end. i've been working on this program for some days now. i've been trying to figure it out by myself, thats why i kinda waited this long to post a reply. no need to apologize, i understand. i'm not trying to get the answers, i'm just looking for helpful hints to kind of steer me in the right direction. and see where it is that i'm going wrong.

needhelp101
03-17-2012, 06:03 PM
i have made the changes in which you suggested. i can still get the totals. but when i try to store the cookie, and retrieve the cookie, i can't seem to get them to work. and i'm not sure what i am doing wrong. this is the code i have so far.



<html>

<head>
<title> Store </title>
<h1> My store </h1>
<script type="text/javascript">

function setCookie()
{
var exdate = new Date();
exdate.setDate(exdate.getDate() +10);
document.cookie = "Circle=" + document.getElementsByName("quantity1")[0].value + document.getElementsByName("price1")[0].value +

";expires="+exdate.toGMTString();
}

function retrieve()
{
document.getElementsByName("ret")[0].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);
}
</script>

</head>

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

</table>
<br />
<input type = "button" value = "Add to cart" onclick="setCookie()">
<br />
<br />
<a href ="cart.html" onload = "setCookie()"> View Cart </a>
<br />
<input type = "text" size = "8" id = "total" readonly = "readonly" /> Total
<br />
<input type = "button" id = "calcu" value = "calc" onclick = "Calc()" />
<input type = "button" onclick = "retrieve()" />
<input type = "text" readonly = "readonly" name = "ret" id = "ret"/>





</body>
</html>

sunfighter
03-19-2012, 04:39 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Store </title>
<h1> My store </h1>
<style type="text/css">
#image1, #image2, #image1a, #image2a{
display:none;
}
</style>
<script type="text/javascript">
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return(strValue);
}
function show_element(element, elementa, elementb, elementc)
{
ted = getStyle(document.getElementById(element), "display");
if(ted == 'none'){
document.getElementById(element).style.display = 'block';
document.getElementById(elementb).value = '';
document.getElementById(elementb).focus();

}else{
document.getElementById(element).style.display = 'none';
document.getElementById(elementa).style.display = 'none';
document.getElementById(elementb).value = '';
document.getElementById(elementc).value = '';
var temp = show_total();
}
}
function tally(val, bas, im, tot)
{
if (isNaN(document.getElementById(val).value)){
document.getElementById(val).value = '';
return;
}
ted = getStyle(document.getElementById(im), "display");
if(ted == 'none'){document.getElementById(im).style.display = 'block';}
var fpri = document.getElementById(bas).value;
var pri = fpri.substr(1);
var qty = document.getElementById(val).value;
var item_total = Number(pri) * Number(qty);
document.getElementById(tot).value = '$'+item_total;
var temp = show_total();
return;
}
function show_total()
{
var tabby = 0;
for(x = 1; x<3; x++)
{
temppy = document.getElementById('quantity'+x+'a').value;
tempp = temppy.substr(1);
tabby += Number(tempp);
}
document.getElementById('ret').value = '$'+tabby;
return;
}
</script>
</head>

<body>
<table border="0">
<tr>
<td> <input type="checkbox" id="circle" onclick="show_element('image1', 'image1a','quantity1', 'quantity1a');" /> Circle </td>
<td> <img src="images/poweredbypopbox2.gif" alt="" /> </td>
<td> Price: <input type="text" size="4" value = "$10.09" id="price1" name = "price1" /></td>
<td><div id="image1">Quantity: <input type="text" size="4" id="quantity1"
onkeyup="tally('quantity1', 'price1', 'image1a', 'quantity1a');" /></div></td>
<td><div id="image1a">Item Total: <input type="text" size="4" id="quantity1a" /></div></td>
</tr>

<tr>
<td> <input type = "checkbox" id="stickman" onclick="show_element('image2', 'image2a','quantity2', 'quantity2a');" /> Stickman </td>
<td> <img src="images/poweredbypopbox2.gif" alt="" /> </td>
<td> Price: <input type="text" size="4" value = "$5.07" id="price2" /> </td>
<td><div id="image2">Quantity: <input type="text" size="4" id="quantity2"
onkeyup="tally('quantity2', 'price2', 'image2a', 'quantity2a');" /></div></td>
<td><div id="image2a">Item Total: <input type="text" size="4" id="quantity2a" onblur="bs('image2a');" /></div></td>
</tr>
</table>
<input type="text" readonly="readonly" name="ret" id="ret" value="" />
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum