...

View Full Version : Creating a shopping cart (table)



MrCrane
05-07-2009, 05:22 PM
Hi, i'm new to JavaScript.

I'm trying to create a shopping cart where a customer buys an item by selecting the quantity from a drop down list, then they presses a "view shopping cart" button.

When this is pressed, a table (which is a shopping cart) appears with the name of the item, quantity, price per item and the sum total (quantity * price per item).

Can someone tell me how i go about creating the table in javacscript, calculating the price and getting values from the dropdown list.

I've already started it, but i'm having serious trouble. Here's my code so far:


<html>
<head>
<title>Toy's Will Kill</title>
<script language="JavaScript" type="text/javascript">
function CreateTable(){
var tab = document.createElement("table");
document.getElementById("place1")
.appendChild(tab);
tab.setAttribute("border", "3");
var tbdy=document.createElement("tbody");
tab.appendChild(tbdy);

var cart=Array("Name","Quantity","Price per Item", "Sum Total");
for (var j=0; j<=1; j++) {
var tr=document.createElement("tr");
tbdy.appendChild(tr);
var td=document.createElement("td");
td.appendChild(document.createTextNode(cart[j]));
tr.appendChild(td);
var td=document.createElement("td");
td.appendChild(document.createTextNode(j));
tr.appendChild(td);
}
}
</script>
</head>

<body>
<form name=ToysWillKill>

<img src="images/toy1.jpg" alt="toy1"/>
<select name="toy1" id="toy1">
<option value="Zero">0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
<option value="Five">5</option>
</select>
<br>5.00</br>

<p><img src="images/toy2.jpg" alt="toy2"/>
<select name="toy2" id="toy2">
<option value="Zero">0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
<option value="Five">5</option>
</select>
<br>5.00</br></p>

<p><img src="images/toy3.jpg" alt="toy3"/>
<select name="toy3" id="toy3">
<option value="Zero">0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
<option value="Five">5</option>
</select>
<br>5.00</br></p>

<p><img src="images/toy4.jpg" alt="toy4"/>
<select name="toy4" id="toy4">
<option value="Zero">0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
<option value="Five">5</option>
</select>
<br>5.00</br></p>

<p><img src="images/toy5.jpg" alt="toy5"/>
<select name="toy5" id="toy5">
<option value="Zero">0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
<option value="Five">5</option>
</select>
<br>5.00</br></p>

<input type="button" value="View Shopping Cart" onClick="CreateTable();">
</form>
<div id="place1"></div>
</body>
</html>

Old Pedant
05-07-2009, 10:58 PM
Dare we assume this is homework???

A shopping cart entirely in HTML is not a very useful thing. Without server-side code (PHP/JSP/ASP/CF/etc.) to store the order into a database table, the whole experience will of necessity be transitory. So when I see an all-HTML shopping cart, I have to assume it's homework of some kind.

Let me give you one big hint: You do *NOT* want to use value="One" and so on. You *want* to just use value="1". Or get rid of the value= altogether.

Another hint: In the real world, all items are *NOT* the same price. So you would want to display the appropriate price *AND* you'd want to be able to multiply quantity times appropriate price. One good way to do this is to use a hidden form field.

Oh, w.t.h. We aren't suppose to do homework here, but I'll show you a quicky sample:


<p><img src="images/toy4.jpg" alt="toy4"/>
<input type=hidden name="price4" value="3.75">
<select name="toy4" id="toy4">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>3.75</br></p>
...


By the by...*does* the table, as you've coded it so far, appear correctly?

Oh...and what do you do if the user changes his/her mind? Changes the quantity of some item?

(p.s.: I'm sure the reason you had no responses until now is because most people just passed on answering, assuming it is homework.)

And if this is not homework, then sincere apologies. But then I have to wonder if this is the right way to go for a "real life" shopping cart. I wouldn't use it except for the most limited kind of product range. 10 products that never change, maybe.

MrCrane
05-08-2009, 04:21 PM
Thanks, i've already sorted it out now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum