Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problems with cookies

    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
    Code:
    <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>
    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    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:
    Code:
    <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:
    Code:
    functino load()
    is wrong!

    I have made a function to replace your CalcIt() function, but this is only for the first row (the circle):
    Code:
    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.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    The load function has a spelling mistake
    Code:
    functino load()
    should be
    Code:
    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.

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •