Solved

Auto Calculation script

Posted on 2001-07-22
9
185 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 15

Expert Comment

by:a.marsh
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:olegtim
Comment Utility
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 300 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now