Solved

Auto Calculation script

Posted on 2001-07-22
9
188 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
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 300 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

831 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