Forum Moderators: open
I'm trying to build my own sandwich store online where people can buy subs and add veggies.
I used to have two textfields [Nb of subs] [Nb of subs with veggies] next to the Sub Name (Tuna sandwich). But now, I want to replace those textfields buy image-buttons that can be clicked.Then I want to show the (X) and (Y) and the price.
imgA imgB ClicksA Description Price
[+Sandwich][+veggies] (X)(Y)TUNA SANDWCHICH $Price
ClicksB
Later, the information is sent to my database to record the order.
----------------
<script type="text/javascript">
var counttuna = 0;
window.onload=function(){
oc=document.getElementById('tuna');
oc.onclick=function() {
showtuna(++counttuna);
}
}
function showtuna(word){
document.getElementById('counttuna').firstChild.nodeValue=word;
}
</script>
</head>
<body>
<img src="tuna.gif" id=tuna><span id=counttuna></span>Tuna sandwich
----
Obviously, I need help... :)
Something like this?
<script type="text/javascript">
function addItem(theCount){
document.getElementById(theCount).innerHTML = parseFloat(document.getElementById(theCount).innerHTML)+1;
}
</script><img src="tuna.gif" onclick="addItem('counttuna');"><span id="counttuna">0</span> Tuna sandwich
<style type="text/css">
body{
font: 12px arial;
}
.itemCount{
cursor:hand;
font-weight:bold;
}
</style><script type="text/javascript">
/* add 1 to the total */
function addItem(theCount){
document.getElementById(theCount).innerHTML = parseFloat(document.getElementById(theCount).innerHTML)+1;
}
/* removes 1 from total as long as total is above 0 */
function removeItem(theCount){
if(parseFloat(document.getElementById(theCount).innerHTML) > 0){
document.getElementById(theCount).innerHTML = parseFloat(document.getElementById(theCount).innerHTML)-1;
}
}
/* resets all items according the tagToCheck param to 0 */
function resetAllItems(tagToCheck){
var numElements = document.getElementsByTagName(tagToCheck).length;
var i = 0;
while (i < numElements){
document.getElementsByTagName(tagToCheck)[i].innerHTML = 0;
i++
}
}
/* post all item counts to your ASP page */
function postItems(){
document.getElementById('txtTuna').value = document.getElementById('counttuna').innerHTML;
document.getElementById('txtHam').value = document.getElementById('countHam').innerHTML;
document.getElementById('txtCola').value = document.getElementById('countCola').innerHTML;
document.getElementById('frmPostItems').submit();
}
</script><p>Click item to add or click number to remove. <a href="jsDisabled.html" onclick="resetAllItems('span'); return false;">Click here to reset.</a></p>
<p><a href="jsDisabled.html" onclick="addItem('counttuna'); return false;"><img src="tuna.gif" alt="click to add item" /></a>
<br /><span id="counttuna" onclick="removeItem('counttuna');" class="itemCount">0</span> Tuna sandwich</p><p><a href="jsDisabled.html" onclick="addItem('countHam'); return false;"><img src="ham.gif" alt="click to add item" /></a>
<br /><span id="countHam" onclick="removeItem('countHam');" class="itemCount">0</span> Ham sandwich</p><p><a href="jsDisabled.html" onclick="addItem('countCola'); return false;"><img src="cola.gif" alt="click to add item" /></a>
<br /><span id="countCola" onclick="removeItem('countCola');" class="itemCount">0</span> Cola</p><!-- form to post totals -->
<form action="addToDatabase.asp" method="post" id="frmPostItems">
<input type="hidden" name="txtTuna" id="txtTuna" />
<input type="hidden" name="txtHam" id="txtHam" />
<input type="hidden" name="txtCola" id="txtCola" /><input type="button" value="Insert into database" onclick="postItems();" />
</form>
