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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Tables??

    Goodevening

    I want every item that is added to the shopping cart to display in a separate row. Currently all the items added to the shopping cart displays in one row.

    The "remove item from cart" must also display next to each item so that individual items can be removed and the items that is not removed must still display in the table. Currently all the items is removed when i click on "remove item from cart"

    Here is my code that displays items in my shopping cart:

    Code:
    <html>
    <head>
    	<title>JavaScript Cookies - Shopping Cart</title>
    
    <script language="JavaScript">
    var item_name = new Array();
    item_name[0] = "T-Shirt - Small";
    item_name[1] = "T-Shirt - Medium";
    item_name[2] = "T-Shirt - Large";
    item_name[3] = "Lime Green Cap";
    item_name[4] = "Orange Cap";
    item_name[5] = "Teddy Bear";
    
    var item_price = new Array();
    item_price[0] = 29.50;
    item_price[1] = 34.50;
    item_price[2] = 39.50;
    item_price[3] = 18.75;
    item_price[4] = 18.75;
    item_price[5] = 66.50;
    
    
    
    var item_number = new Array();
    
    if (document.cookie && document.cookie != ""){process_cookie()}
    
    function process_cookie(){
    var whole_cookie = unescape(document.cookie);
    var drop_name = whole_cookie.split("=");
    if (drop_name[1] != ""){
    item_number = drop_name[1].split("xxx");
    }//ends IF
    }//ends process_cookie() function
    
    function kill_cookies(){
    var kill_date = new Date("January 1, 1970");
    document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
    }//ends kill_cookie() function
    
    function remove(){
    var new_cookie_raw_data = "drop this";
    
    if (document){
    for (i = 0; i < document.length; i++){
    if (document[i].checked == true){
    new_cookie_raw_data = new_cookie_raw_data + document[i].value + "xxx";
    }//ends IF
    }//ends FOR
    }//ends testing IF
    
    var drop_initialization = new_cookie_raw_data.split("drop this");
    
    if (drop_initialization[1] == ""){
    kill_cookies()
    }//ends IF
    
    if (drop_initialization[1] != ""){
    var clean_data = drop_initialization[1];
    document.cookie = "stuff=" + escape(clean_data);
    }//end IF
    
    window.location = "cart.html";
    }//ends remove() function
    
    
    </script>
    
    </head>
    
    <body>
    <h1 align="center">Easy Credit Shopping Cart</h1>
    <p>&nbsp;</p>
    
    <hr>
    
    
    
    
    <div align="center"><table width="70%" border="1">
      <tr>
        <td><script language="JavaScript">
    
    var total = 0;
    
    for (i = 0; i < item_number.length - 1; i++){
    
    document.write("" + item_name[item_number[i]] + "<br>");
    
    }
    
    </script></td>
        
    	<td><script language="JavaScript">
    
    var total = 0;
    
    for (i = 0; i < item_number.length - 1; i++){
    
    document.write("" + item_price[item_number[i]] + "<br>");
    
    }
    
    </script></td>
        
    	
    	  <td align="left" valign="middle"><a href="Cart.html" onclick = "remove()">Remove 
            from cart</a><br>
          </td>
      </tr>
      <tr>
        <td>Total:</td>
        <td><script language="JavaScript">
    
    var total = 0;
    
    for (i = 0; i < item_number.length - 1; i++){
    
    total = total + item_price[item_number[i]];
    }//ends FOR
    
    //Total
    document.write("R" + total + "");
    
    </script></td>
        
    	<td>&nbsp;</td>
      </tr>
    </table>
     </div>
    
    
    
    
    
    <div align="center">
      <p>&nbsp;</p>
      <p><a href="Home.html">Return to Order Page</a></p>
      <p><a href="Order.html">Display Printable Order Form</a><br>
        <br>
      </p>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    I hope this works, although i can't test it because i don't have the needed cookie. (wanna have cookies )
    Code:
    <html>
    	<head>
    		<title>JavaScript Cookies - Shopping Cart</title>
    		<script type="text/javascript">
    			var item_name = [];
    			item_name[0] = "T-Shirt - Small";
    			item_name[1] = "T-Shirt - Medium";
    			item_name[2] = "T-Shirt - Large";
    			item_name[3] = "Lime Green Cap";
    			item_name[4] = "Orange Cap";
    			item_name[5] = "Teddy Bear";
    
    			var item_price = [];
    			item_price[0] = 29.50;
    			item_price[1] = 34.50;
    			item_price[2] = 39.50;
    			item_price[3] = 18.75;
    			item_price[4] = 18.75;
    			item_price[5] = 66.50;
    
    			var item_number = [];
    
    			if(document.cookie) process_cookie()
    
    			function process_cookie() {
    				var whole_cookie = unescape(document.cookie);
    				var drop_name = whole_cookie.split("=");
    				if(drop_name[1]) item_number = drop_name[1].split("xxx");
    			}
    
    			function kill_cookies() {
    				var kill_date = new Date("January 1, 1970");
    				document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
    			}
    
    			function remove(which) {
    				item_number.splice(which, 1);
    				if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx");
    				else kill_cookies();
    				fill_table();
    			}
    
    			function fill_table() {
    				var parent_el = document.getElementById("cart");
    				for(var i = 0; i < parent_el.childNodes.length; i++) {
    					parent_el.removeChild(parent_el.childNodes[i]);
    				}
    				var price_total = 0;
    				for(var i = 0; i < item_number.length; i++) {
    					var row = document.createElement("tr");
    					var name = document.createElement("td");
    					name.appendChild(document.createTextNode(item_name[item_number[i]]));
    					var price = document.createElement("td");
    					price.appendChild(document.createTextNode(item_price[item_number[i]]));
    					var remove = document.createElement("td");
    					var del_link = document.createElement("a");
    					del_link.appendChild(document.createTextNode("Remove from cart"));
    					del_link.setAttribute("href", "javascript:remove(" + i + ")");
    					remove.appendChild(del_link);
    					row.appendChild(name);
    					row.appendChild(price);
    					row.appendChild(remove);
    					parent_el.appendChild(row);
    					price_total += item_price[item_number[i]];
    				}
    				if(i) {
    					var row = document.createElement("tr");
    					total_msg = document.createElement("td");
    					total_msg.appendChild(document.createTextNode("Total:"));
    					total_price = document.createElement("td");
    					total_price.appendChild(document.createTextNode("R" + price_total));
    					total.appendChild(total_msg);
    					total.appendChild(total_price);
    					total.appendChild(document.createElement("td"));
    					parent_el.appendChild(total);
    				}
    				else {
    					var row = document.createElement("tr");
    					var no_items = document.createElement("td");
    					no_items.appendChild(document.createTextNode("No items in cart"));
    					row.appendChild(no_items);
    					parent_el.appendChild(row);
    				}
    			}
    			window.onload = fill_table;		 
    		</script>
    	</head>
    	<body>
    		<h1 align="center">Easy Credit Shopping Cart</h1>
    		<p>&nbsp;</p>
    		<hr>
    		<div align="center"><table width="70%" border="1">
    			<table id="cart">
    			</table>
    		</div>
    		<div align="center">
     			<p>&nbsp;</p>
    			<p><a href="Home.html">Return to Order Page</a></p>
    			<p><a href="Order.html">Display Printable Order Form</a><br><br></p>
    		</div>
    	</body>
    </html>
    Edit: Removes and rewrites table content now instead of reloading the page
    Last edited by dumpfi; 07-13-2004 at 04:06 AM.

  • #3
    New Coder
    Join Date
    Jul 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You Dumpfi!!!!!!

    I will try your code an then I will see if it works. If it does not work I will spost the code for the cookie as you requested!!

    Cheers

  • #4
    New Coder
    Join Date
    Jul 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Tried the code gives error

    Hi Dumpfi


    Everything works fine on the code below.
    It is the cookies that you asked so you can test my code


    Code:
    <html>
    <head>
    <title>Easy Credit Online Shopping</title>
    
    <script language="JavaScript">
    	function place(new_item){
    	//process old cookie
    	if (document.cookie && document.cookie != ""){
    var old_cookie = document.cookie;
    document.cookie = old_cookie + escape(new_item + "xxx");
    }//ends old cookie IF
    
    else{
    document.cookie = "stuff=" + escape(new_item + "xxx");
    }//ends ELSE
    }//ends function
    
    
    function Message1()
    {
    alert("T-Shirt - Small has been added to your shopping cart.");
    }		
    	
    function Message2()
    {
    alert("T-Shirt - Medium has been added to your shopping cart.");
    }		
    
    function Message3()
    {
    alert("T-Shirt - Large has been added to your shopping cart.");
    }			
    
    function Message4()
    {
    alert("Lime Green Cap has been added to your shopping cart.");
    }			
    
    function Message5()
    {
    alert("Orange Cap has been added to your shopping cart.");
    }			
    	
    function Message6()
    {
    alert(" Teddy Bear has been added to your shopping cart.");
    }			
    
    function Keypressed(keyCode)
    {
    if (keyCode==86)
    {
    window.location = "cart.html";
    }
    }
    
    </script>
    
    	
    </head>
    
    <body bgcolor="lightgrey">
    <div align="center">
      <p><font size="5"><b>Welcome to the Easy Credit Online Shopping Site</b></font> 
      </p>
      <p>&nbsp;</p>
    </div>
    <hr>
    
    <p align="center">Press 'V' to view your Shopping cart or click <a href="cart.html" onkeydown = "Keypressed(event.keyCode)">here</a></p>
    
    <table bgcolor = "white" width="70%" border="1" align = "center">
      <tr> 
        <td width="22%" height="10">T-Shirt</td>
        <td width="70%" height="10" align="left"> 
          <p align="left">Lime Green T-Shirt with Orange Easy Credit Logo - Small</p>
          <p ><a href="javascript:place(0)" onclick = "Message1()" align="left">Add to Shopping Cart</a></p>
        </td>
        <td width="8%" height="10">R29.50</td>
      </tr>
      <tr> 
        <td width="22%" height="10">T-Shirt</td>
        <td width="70%" height="10" align="left"> 
          <p align="left">Lime Green T-Shirt with Orange Easy Credit Logo -Medium</p>
          <p ><a href="javascript:place(1)" onclick = "Message2()" align="left">Add to Shopping Cart</a></p>
        </td>
        <td width="8%" height="10">R34.50</td>
      </tr>
      <tr> 
        <td width="22%" height="10">T-Shirt</td>
        <td width="70%" align="left" height="10"> 
          <p align="left">Lime Green T-Shirt with Orange Easy Credit Logo - Large</p>
          <p ><a href="javascript:place(2)" onclick = "Message3()" align="left">Add to Shopping Cart</a></p>
        </td>
        <td width="8%" height="10">R39.50</td>
      </tr>
      <tr> 
        <td width="22%" height="10">Cap</td>
        <td width="70%" align="left" height="10"> 
          <p align="left">Adjustable Lime Green Cap with Orange Easy Credit Logo</p>
          <p ><a href="javascript:place(3)" onclick = "Message4()" align="left">Add to Shopping Cart</a></p>
        </td>
        <td width="8%" height="10">R18.75</td>
      </tr>
      <tr> 
        <td width="22%" height="10">Cap</td>
        <td width="70%" align="left" height="10"> 
          <p align="left">Adjustable Orange Cap with Lime Green Cap Easy Credit Logo</p>
          <p ><a href="javascript:place(4)" onclick = "Message5()" align="left">Add to Shopping Cart</a></p>
        </td>
        <td width="8%" height="10">R18.75</td>
      </tr>
      <tr> 
        <td width="22%" height="10">Easy Credit Teddy Bear</td>
        <td width="70%" align="left" height="10"> 
          <p align="left">25cm Tall Lime Green Teddy Bear with Orange T-shirt</p>
          <p ><a href="javascript:place(5)" onclick = "Message6()" align="left">Add to Shopping Cart</a></p>
        </td>
        <td width="8%" height="10">R66.50</td>
      </tr>
    </table>
    <p align="center">E-mail us for more information: <a href="mailto:easycredit@hotmail.com">easycredit@hotmail.com</a></p>
    </body>
    </html>

    Below is the code you gave me. It gives an error when i tried testing it. The error says that "total is undefined" And it points to the line total.appendChild(total_msg); I don't know if it is going to give more errors because I can't get past this one.

    Code:
    <html>
    	<head>
    		<title>JavaScript Cookies - Shopping Cart</title>
    		<script type="text/javascript">
    			var item_name = [];
    			item_name[0] = "T-Shirt - Small";
    			item_name[1] = "T-Shirt - Medium";
    			item_name[2] = "T-Shirt - Large";
    			item_name[3] = "Lime Green Cap";
    			item_name[4] = "Orange Cap";
    			item_name[5] = "Teddy Bear";
    
    			var item_price = [];
    			item_price[0] = 29.50;
    			item_price[1] = 34.50;
    			item_price[2] = 39.50;
    			item_price[3] = 18.75;
    			item_price[4] = 18.75;
    			item_price[5] = 66.50;
    
    			var item_number = [];
    
    			if(document.cookie) process_cookie()
    
    			function process_cookie() {
    				var whole_cookie = unescape(document.cookie);
    				var drop_name = whole_cookie.split("=");
    				if(drop_name[1]) item_number = drop_name[1].split("xxx");
    			}
    
    			function kill_cookies() {
    				var kill_date = new Date("January 1, 1970");
    				document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
    			}
    
    			function remove(which) {
    				item_number.splice(which, 1);
    				if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx");
    				else kill_cookies();
    				fill_table();
    			}
    
    			function fill_table() {
    				var parent_el = document.getElementById("cart");
    				for(var i = 0; i < parent_el.childNodes.length; i++) {
    					parent_el.removeChild(parent_el.childNodes[i]);
    				}
    				var price_total = 0;
    				for(var i = 0; i < item_number.length; i++) {
    					var row = document.createElement("tr");
    					var name = document.createElement("td");
    					name.appendChild(document.createTextNode(item_name[item_number[i]]));
    					var price = document.createElement("td");
    					price.appendChild(document.createTextNode(item_price[item_number[i]]));
    					var remove = document.createElement("td");
    					var del_link = document.createElement("a");
    					del_link.appendChild(document.createTextNode("Remove from cart"));
    					del_link.setAttribute("href", "javascript:remove(" + i + ")");
    					remove.appendChild(del_link);
    					row.appendChild(name);
    					row.appendChild(price);
    					row.appendChild(remove);
    					parent_el.appendChild(row);
    					price_total += item_price[item_number[i]];
    				}
    				if(i) {
    					var row = document.createElement("tr");
    					total_msg = document.createElement("td");
    					total_msg.appendChild(document.createTextNode("Total:"));
    					total_price = document.createElement("td");
    					total_price.appendChild(document.createTextNode("R" + price_total));
    					 total.appendChild(total_msg);
    
    					total.appendChild(total_price);
    					total.appendChild(document.createElement("td"));
    					parent_el.appendChild(total);
    				}
    				else {
    					var row = document.createElement("tr");
    					var no_items = document.createElement("td");
    					no_items.appendChild(document.createTextNode("No items in cart"));
    					row.appendChild(no_items);
    					parent_el.appendChild(row);
    				}
    			}
    			window.onload = fill_table;		 
    		</script>
    	</head>
    	<body>
    		<h1 align="center">Easy Credit Shopping Cart</h1>
    		<p>&nbsp;</p>
    		<hr>
    		<div align="center"><table width="70%" border="1">
    			<table id="cart">
    			</table>
    		</div>
    		<div align="center">
     			<p>&nbsp;</p>
    			<p><a href="Home.html">Return to Order Page</a></p>
    			<p><a href="Order.html">Display Printable Order Form</a><br><br></p>
    		</div>
    	</body>
    </html>
    Last edited by HiEverybody; 07-13-2004 at 12:06 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    This should work:
    Code:
    <html>
    	<head>
    		<title>JavaScript Cookies - Shopping Cart</title>
    		<script type="text/javascript">
    			var item_name = [];
    			item_name[0] = "T-Shirt - Small";
    			item_name[1] = "T-Shirt - Medium";
    			item_name[2] = "T-Shirt - Large";
    			item_name[3] = "Lime Green Cap";
    			item_name[4] = "Orange Cap";
    			item_name[5] = "Teddy Bear";
    
    			var item_price = [];
    			item_price[0] = 29.50;
    			item_price[1] = 34.50;
    			item_price[2] = 39.50;
    			item_price[3] = 18.75;
    			item_price[4] = 18.75;
    			item_price[5] = 66.50;
    
    			var item_number = [];
    
    			if(document.cookie) process_cookie()
    
    			function process_cookie() {
    				var whole_cookie = unescape(document.cookie);
    				var drop_name = whole_cookie.split("=");
    				if(drop_name[1]) {
    					item_number = drop_name[1].split("xxx");
    					item_number.pop();
    				}
    			}
    
    			function kill_cookies() {
    				var kill_date = new Date("January 1, 1970");
    				document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
    			}
    
    			function remove(which) {
    				item_number.splice(which, 1);
    				if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx") + "xxx";
    				else kill_cookies();
    				process_cookie();
    				fill_table();
    			}
    
    			function remove_table() {
    				var elem;
    				if(elem = document.getElementById("cart")) {
    					while(elem.childNodes.length) {
    						elem.removeChild(elem.childNodes[0]);
    					}
    					elem.parentNode.removeChild(elem);
    				}
    			}
    
    			function fill_table() {
    				remove_table();
    				var cart = document.createElement("table");
    				cart.id = "cart";
    				cart.setAttribute("width", "70%");
    				cart.setAttribute("border", 1);				
    				var price_total = 0;
    				for(var i = 0; i < item_number.length; i++) {
    					var row = document.createElement("tr");
    					var name = document.createElement("td");
    					name.appendChild(document.createTextNode(item_name[item_number[i]]));
    					var price = document.createElement("td");
    					price.appendChild(document.createTextNode(item_price[item_number[i]]));
    					var remove = document.createElement("td");
    					var del_link = document.createElement("a");
    					del_link.appendChild(document.createTextNode("Remove from cart"));
    					del_link.setAttribute("href", "javascript:remove(" + i + ")");
    					remove.appendChild(del_link);
    					row.appendChild(name);
    					row.appendChild(price);
    					row.appendChild(remove);
    					cart.appendChild(row);
    					price_total += item_price[item_number[i]];
    				}
    				if(i) {
    					var total = document.createElement("tr");
    					total_msg = document.createElement("td");
    					total_msg.appendChild(document.createTextNode("Total:"));
    					total_price = document.createElement("td");
    					total_price.appendChild(document.createTextNode("R" + price_total));
    					total.appendChild(total_msg);
    					total.appendChild(total_price);
    					total.appendChild(document.createElement("td"));
    					cart.appendChild(total);
    				}
    				else {
    					var row = document.createElement("tr");
    					var no_items = document.createElement("td");
    					no_items.appendChild(document.createTextNode("No items in cart"));
    					row.appendChild(no_items);
    					cart.appendChild(row);
    				}
    				document.getElementById("cart_container").appendChild(cart);
    				// let ie display the table.. *sigh*
    				if(document.all && !window.opera) document.getElementById("cart_container").innerHTML = document.getElementById("cart_container").innerHTML;
    			}
    			window.onload = fill_table;		 
    		</script>
    	</head>
    	<body>
    		<h1 align="center">Easy Credit Shopping Cart</h1>
    		<p>&nbsp;</p>
    		<hr>
    		<div align="center" id="cart_container">
    		</div>
    		<div align="center">
     			<p>&nbsp;</p>
    			<p><a href="Home.html">Return to Order Page</a></p>
    			<p><a href="Order.html">Display Printable Order Form</a><br><br></p>
    		</div>
    	</body>
    </html>
    dumpfi

    Edit: ie displays the table now.
    Last edited by dumpfi; 07-13-2004 at 06:37 PM.

  • #6
    New Coder
    Join Date
    Jul 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thank You

    I am very grateful for your help I have learned alot by just looking at the way you code a web page!!!!


  •  

    Posting Permissions

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