Auto Calculation script

Hi,

Here is what I have:
List of items on the page, each item has name, price next to it, drop down box to select quantity, and image on/off. What I need the script to do is when customers clicks on the image it turns on or off, and if its ON then the items price X quantity is added and displayed automtically on the bottom in input box, and if image clicked OFF than its deducted from the box. Also, somehow items IDs that are stored in hidden fields needs to be passed to the next page on submit, its a form. Any ideas?
LVL 1
olegtimAsked:
Who is Participating?
 
a.marshConnect With a Mentor Commented:
Here you go, I've uploaded the full example to my demo site:

http://www.btinternet.com/~ant.marsh/ee/auto_calc_with_image_toggle/autocalc.html

I have tested the code in IE5.5 and Netscape 4.7 on Windows.

You know what items have been bought upon submitting the form because each item has a hidden field called "item?Buy" where ? is the item number and it is set to either "yes" or "no" depending on whether the user is buying the item or not.

In case the link above ever becomes broken, here is the code (you'll just need to make the 2 images yourself!):


<html>
<head>
<script language="javascript">
<!--

//Set this to the number of items in the list
numOfItems = 3;

//Load images
imgOn = new Image();
imgOff = new Image();

imgOn.src = "on.gif";
imgOff.src = "off.gif";


function changeBuy(imgName, buyObj){
  if(buyObj.value == "yes"){
    buyObj.value = "no";
    eval("document.images['" + imgName + "'].src = imgOff.src");
  }
  else{
    buyObj.value = "yes";
    eval("document.images['" + imgName + "'].src = imgOn.src");
  }

  calcTotal(buyObj.form);
}

function calcTotal(formObj){
  var returnTotal = 0;

  for(var i = 1; i <= numOfItems; i++){
    if(eval("formObj.item" + i + "Buy.value == 'yes'")){
      returnTotal += parseInt(eval("formObj.item" + i + "Qty.options[formObj.item" + i + "Qty.selectedIndex].value")) *
                     parseFloat(eval("formObj.item" + i + "Price.value"));
    }
  }

  //Make a string
  returnTotal = returnTotal + "";

  //Make sure returnTotal has 2 decimal places otherwise you'll get things like $4.5
  if(returnTotal.indexOf(".") == -1){
    returnTotal += ".00";
  }
  else{
    if((returnTotal.length - returnTotal.indexOf(".")) < 3){
      returnTotal += "0";
    }
  }

  formObj.total.value = returnTotal;
}

//-->
</script>
</head>
<body>
<form>
<table border="0" cellpadding="4" cellspacing="2">
<tr>
<td bgcolor="#cccccc">Buy?</td>
<td bgcolor="#cccccc">Qty</td>
<td bgcolor="#cccccc">Description</td>
<td bgcolor="#cccccc">Unit Price</td>
</tr>
<tr>
<td><a href="javascript: void(0);" onClick="changeBuy('item1Img', document.forms[0].item1Buy); return false;"><img src="off.gif" name="item1Img" border="0"></a><input type="hidden" name="item1Buy" value="no"></td>
<td><select name="item1Qty" onChange="calcTotal(this.form);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>Cake</td>
<td>$6.40<input type="hidden" name="item1Price" value="6.40"></td>
</tr>

<tr>
<td><a href="javascript: void(0);" onClick="changeBuy('item2Img', document.forms[0].item2Buy); return false;"><img src="off.gif" name="item2Img" border="0"></a><input type="hidden" name="item2Buy" value="no"></td>
<td><select name="item2Qty" onChange="calcTotal(this.form);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>Coffee Starbucks</td>
<td>$7.50<input type="hidden" name="item2Price" value="7.50"></td>
</tr>

<tr>
<td><a href="javascript: void(0);" onClick="changeBuy('item3Img', document.forms[0].item3Buy); return false;"><img src="off.gif" name="item3Img" border="0"></a><input type="hidden" name="item3Buy" value="no"></td>
<td><select name="item3Qty" onChange="calcTotal(this.form);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>Dessert</td>
<td>$33.00<input type="hidden" name="item3Price" value="33.00"></td>
</tr>

<tr>
<td colspan="4" align="center">$<input type="text" name="total" value="0.00" size="6"></td>
</tr>
<tr>
<td colspan="4" align="center"><input type="submit" value="submit"></td>
</tr>
</table>
</form>
</body>
</html>



:o)

Ant
0
 
a.marshCommented:
Can you give us a link to the code that you currently have? Or if there is not too much of it, paste it here in a comment? (A link would be better).

Then we can enhance it for you.

Ant
0
 
olegtimAuthor Commented:
Here is link but there i no code behind it, its jus tstatic HTML to see the example, actual info will be pulled from DB.

http://www.scipod.com/menu/menu.html
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
a.marshCommented:
Do you HAVE to use ON/OFF images?

Can you not use checkboxes? I personally think it would be much better (and easier to implement).

Ant
0
 
a.marshCommented:
Here you go:

<html>
<head>
<script language="javascript">
<!--

//Set this to the number of items in the list
numOfItems = 3;

function calcTotal(formObj){
  var returnTotal = 0;

  for(var i = 1; i <= numOfItems; i++){
    if(eval("formObj.item" + i + "Buy.checked")){
      returnTotal += parseInt(eval("formObj.item" + i + "Qty.value")) *
                     parseFloat(eval("formObj.item" + i + "Price.value"));
    }
  }

  //Make a string
  returnTotal = returnTotal + "";

  //Make sure returnTotal has 2 decimal places otherwise you'll get things like $4.5
  if(returnTotal.indexOf(".") == -1){
    returnTotal += ".00";
  }
  else{
    if((returnTotal.length - returnTotal.indexOf(".")) < 3){
      returnTotal += "0";
    }
  }

  formObj.total.value = returnTotal;
}

//-->
</script>
</head>
<body>
<form>
<table border="0" cellpadding="4" cellspacing="2">
<tr>
<td bgcolor="#cccccc">Buy?</td>
<td bgcolor="#cccccc">Qty</td>
<td bgcolor="#cccccc">Description</td>
<td bgcolor="#cccccc">Unit Price</td>
</tr>
<tr>
<td><input type="checkbox" name="item1Buy" onClick="calcTotal(this.form);"></td>
<td><select name="item1Qty" onChange="calcTotal(this.form);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>Cake</td>
<td>$6.40<input type="hidden" name="item1Price" value="6.40"></td>
</tr>

<tr>
<td><input type="checkbox" name="item2Buy" onClick="calcTotal(this.form);"></td>
<td><select name="item2Qty" onChange="calcTotal(this.form);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>Coffee Starbucks</td>
<td>$7.50<input type="hidden" name="item2Price" value="7.50"></td>
</tr>

<tr>
<td><input type="checkbox" name="item3Buy" onClick="calcTotal(this.form);"></td>
<td><select name="item3Qty" onChange="calcTotal(this.form);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>Dessert</td>
<td>$33.00<input type="hidden" name="item3Price" value="33.00"></td>
</tr>

<tr>
<td colspan="4" align="center">$<input type="text" name="total" value="0.00" size="6"></td>
</tr>
</table>
</form>
</body>
</html>


:o)

Ant
0
 
olegtimAuthor Commented:
Ok that looks awsome, now I increased the points so you will consider adjusting it to work with on/off images :), also when I press submit button how do I get the items tha were ordered? Lets say that each item identified with unique it and can be placed, well, where can it be place to be passed if selected to purchase :)
thank you
0
 
olegtimAuthor Commented:
Perfect work, just one little thing, in item 1 if I choose 6 or 7 items look at the number it gives :) can u fix that, thank you.
0
 
a.marshCommented:
It also does a similiar thing when you choose 3.....Javascript is reknowned for problems like this.

I'll will try and work on it later tonight.

:o)

Ant
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.