Help with shopping cart in javascript
(question edited)
What I am trying to achieve is this: I want button where I can add my item to the shopping cart e.g AddToCart() so I can add my items with the number of quantities that the person will want. To do this I need global arrays like sum, quanitity and name. Except the way I have done it does not have this and I'm not sure how implement this.
The hint that was given to me is this: The price and name of each toy should be read directly from the web page using the DOM method call document.getElementByID(itemPriceID-or-itemNameID).innerHTML, where itempriceID and itemNameID are the id’s of the HTML elements which display the price and name of each toy. (Note: the price (read directly from the page) will be of type string, this needs to be converted to a number, so in order to perform type you will need to use the Javascript type conversion method parseFloat(price) )).
I then need a ViewShoppingCart() which will make a loop through the arrays and display it in a table with the total sum. What I have done is a bit similar but my knowledge and experience was not enough to accomplish the above problem. I hope this makes more sense.
javascript code
function round_total (c) {
var pennies = c * 100;
pennies = Math.round(pennies);
var strPennies = "" + pennies;
var len = strPennies.length;
return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len));
}
// End of round_total function.
/* Start of generate_page function. */
function generate_page (form) {
tax = 0.08;
delivery_p = 2.99;
var odate = new Date();
var qty = form.quantity.value;
var product_v = new String(form.product.value);
var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$"));
var price_without_tax = round_total(qty * total_price);
var ttax = round_total(price_without_tax * tax);
var delivery = round_total(qty * delivery_p);
var total_p = round_total(price_without_tax + ttax + delivery);
document.writeln("Quantity: " + qty + "<br>");
document.writeln("Price: $" + total_price + "<br>");
document.writeln("Delivery: $" + delivery + "<br>");
document.writeln("Total: $" + total_p + "<br>");
document.writeln("Order placed on: " + odate.toGMTString());
}
function calculate() {
round_total (c)();
generate_page (form)();
}
HTML 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="shopping_cart.js" />
</script>
<link rel="stylesheet" type="text/css" href="shopping_cart.css" />
<title> A title </title>
</head>
<body>
<form name="form1" method="post" action="data.php" >
<div id="product1">
<p id="title1"><b>Star Wars Tie Interceptor</b></p>
<img src="../Assingment Pics/Tie Interceptor.jpg" /> <p id="price1">Price £39.99</p> <p><b>Qty</b></p>
<select name="qty">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<div id="product2">
<p id="title2"><b>Star Wars Clone Wars Vehicles Corporate Allinace Tank</b></p>
<img src="../Assingment Pics/Corporate Tank.jpg" /><p id="price2">Price £29.99</p> <b> Qty</b>
<select name="qty2">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<div id="product3">
<p id="title3"><b>Star Wars Clone Wars AT-ST vehicle</b></p>
<img src="../Assingment Pics/At St.jpg" /><p id="price3">price £49.99</p> <b>Qty</b>
<select name="qty3">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<br />
<input type="submit" value="Add to cart" name="submit" onClick="cart()";/><input
, type="reset" value="Reset" name="reset">
</form>
</body>
</html>
Do I need to show my CSS as well? (Sorry about t开发者_开发百科he coding its not working properly for me, its not showing up the way it should be)
Okay, so now you can do something like
var productname = new array();
var productprice = new array();
var productquantity = new array();
function cart()
{
for (i=1;i<=3;i++)
{
var name = 'title'+i;
var price = 'price'+i;
var quantity = 'qty'+i;
productname[i] = document.getElementById(name).innerHTML;
productprice[i] = document.getElementById(price).innerHTML;
var selectfield = document.getElementById(quantity).
productquantity[i] = selectfield.options[selectfield.selectedIndex].text;
}
}
there might be an error in this code, I didn't really test it, but it should fill these arrays with the values of the products you have. Then next on you should turn quantity into integer, price into float and do the calculations you plan to do. So total price would be productprice[1] + productprice[2] + productprice[3]. This code still needs editing to actually work, and there might be a smarter way to get you there, but this should make for a start.
The obvious mistake you have made is that you have placed the buttons outside the tags, which makes them do nothing. First fix that.
On the javascript part, I don't really understand what you are trying to achieve. I see 'onClick="cart()"' in the submit button, but this function seems to be non-existant? Either you should put the input buttons inside the form field, then it will load data.php (as I suggested in the frist paragraph), or you could use the cart() function to read the values and use AJAX to send the values without loading a new page (which you seem to want if I understand correctly).
Please explain better what you want, before this can be properly answered.
加载中,请稍侯......
精彩评论