Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Auto Calculation script

Posted on 2001-07-22
9
Medium Priority
?
200 Views
Last Modified: 2008-02-01
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?
0
Comment
Question by:olegtim
  • 6
  • 3
9 Comments
 
LVL 15

Expert Comment

by:a.marsh
ID: 6306661
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
 
LVL 1

Author Comment

by:olegtim
ID: 6306696
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
 
LVL 15

Expert Comment

by:a.marsh
ID: 6306701
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:a.marsh
ID: 6306734
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
 
LVL 1

Author Comment

by:olegtim
ID: 6306759
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
 
LVL 15

Accepted Solution

by:
a.marsh earned 1200 total points
ID: 6306832
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
 
LVL 1

Author Comment

by:olegtim
ID: 6306864
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
 
LVL 15

Expert Comment

by:a.marsh
ID: 6307447
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
 
LVL 15

Expert Comment

by:a.marsh
ID: 6314508
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question