Hi Folks...

I've been building a shopping cart from a tutorial but I want to add some extra functionality.

The tute allows for a JavaScript function on up and down buttons to increment the numerical values of items in the cart but only one click at a time.

I would like to add a spin control to the buttons but have very little idea of how to work with JavaScript. I figure I need a setTimeout function and some decision (if-else) to differentiate from single click and spin.

My view cart code is pasted below. If anyone can give me some clues on how these spin control thingiis work I would much appreciate it.

cha
t3

viewCart code below (difficult to point to specific code without line numbers, but the buttons are about halfway down ... perhaps I should add the spin into the functions at the top ... not sure of the logic let alone the syntax):

<?php
include("init.php"); //include a PHP file for common initialisation functions such as connect to database, etc
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>View cart</title>
<script type="text/javascript">
<!--
function qtyUp(oBtn){

var oQty = document.getElementById("q" + oBtn.id.substring(1));
//alert("qtyUp " + oBtn.id.substring(1) + " is " + oQty.value );
oQty.value++;
}

function qtyDown(oBtn){

var oQty = document.getElementById("q" + oBtn.id.substring(1));
//alert("qtyDown " + oBtn.id.substring(1) + " is " + oQty.value );
oQty.value--;
if (oQty.value<0) {
oQty.value = 0;
}
}
// -->
</script>

</head>
<body>
<?php
include("nav.php");
printf('<h1>Shopping cart</h1>');
$sql = sprintf('SELECT * FROM Items INNER JOIN Products ON Items.ProductID = Products.ProductID WHERE OrderID ="%s";',$_SESSION["OrderID"]);// use the INNER JOIN to obtain information from related tables
//printf('<br />$sql is %s', $sql);
$result = mysql_query($sql, $conn) or die(mysql_error);
mysql_close($conn);
$rowCount = mysql_num_rows($result);
if ($rowCount == 0) {
printf(' is empty');
}else{
printf('<form action="updateCart.php">');
printf('<table border="1">
<tr><td>Picture</td> <td>Name</td> <td>Unit Price</td> <td>Quantity</td> <td>Sub-total</td> <td>&nbsp;</td></tr>');
$orderTotal = 0; //initialise $orderTotal
$itemNum = 0;
while ($row = mysql_fetch_array($result) ){
$itemTotal = $row["Quantity"] * $row["Price"];
printf('<tr><td><img src="%s" width="100px" alt=" Picture of %s" /></td>
<td>%s</td><td>$%.2f</td><td><input type="hidden" name="i%s" value="%s" /><button id="u%s" type="button" onclick="qtyUp(this);">^</button><br /><input type"text" value="%s" name="q%s" id="q%s" readonly="" /><br /><button id="d%s" type="button" onclick="qtyDown(this);">v</button></td><td>$%.2f</td>', $row["Picture"], $row["Title"], $row["Title"], $row["Price"], $itemNum, $row["ItemID"], $itemNum, $row["Quantity"], $itemNum, $itemNum, $itemNum, $itemTotal);
printf("<td><a href='deleteCart.php?ItemID=%s&ff=yes' style='text-decoration:none;' ><button onclick='location.href=\"deleteCart.php?ItemID=%s&ie=yes\"';>Delete</button></a></td></tr>",$row["ItemID"],$row["ItemID"]);
$itemNum++; ///////////////////point to next item
$orderTotal += $itemTotal;//add each item to orderTotal as we loop
}
printf('<tr><td colspan="3">&nbsp;</td><td>&nbsp;Plus GST &nbsp;</td><td>$%.2f</td><td><input type="submit" value="Update" /></td></tr>',$orderTotal/11 );
printf('<tr><td colspan="3">&nbsp;</td><td>&nbsp;Order Total&nbsp;</td><td>$%.2f</td><td>&nbsp;</td></tr>',$orderTotal );
printf("<tr><td colspan='3'>&nbsp;</td><td><a href='checkout.php' style='text-decoration:none;' ><button onclick='location.href=\"checkout.php\"';>Proceed to Checkout</button></a></td><td>&nbsp;</td><td>&nbsp;</td></tr>" );
printf('</table>');
printf('</form>');
$_SESSION["CheckoutID"] = $_SESSION["OrderID"];// remember this order if we go to the checkout.
}

?>

</body>
</html>