• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

Update Total Price on the Fly using Javascript

I'm trying to create a shopping cart system that integrates with an existing Point of Sale system.  Due to that reason, I'm some what limited in the flexibilty I have with the data I receive.  That being said, here's the question:

Each item/product is loaded into my viewprd.asp page.  Then, I load the item's modifiers into a table and display them, sorting them by Modifier Type. (i.e.  Product=Hamburger,ModifierType=Toppings, Modifier=Mustard, Pickles, etc.)  In some cases only a maximum number of  modifiers may be selected for any given Modifier Type.  In other cases, there are up-charges for adding an item (add fries for $1.50).

You can see an example of what I'm talking about at http://www.joandjoes.com/viewprd.asp

I have javascript code that ensures that if a maximun number of modifiers has been reached, no more can be selected.  I also have code that lets me add the modifier price to a total.  Unfortunatly, I can't do both at the same time.

Because of the way I need to process the form, the value for the Modifier checkboxes has to be the ModifierID  (i.e. ModifierID 4103 = Pickles).  This means that any onClick action would need to refer to a hidden value that contains the price value.  

Here is the code for one of my checkboxes (actually, its the code for all of the check boxes, since it loops through):

<input name="<%=ModName%>_<%=t%>" type="checkbox" value="<%=objrs("MenuModifierID")%>" onclick="boxchk(this,<%=ModMax%>)">

This works with an external .js script that makes sure the correct number of options are selected.

I also have <input type="hidden" name="HMod1<%=t%>" value="<%=AddCost%>"> which contains the modifier price.
I need to return this value onclick to another .js script.  The line for that script is onclick="this.form.total.value=calculateTotal(this);"

I guess in short, lol, is there any way to both check to see if the required number of check boxes have been selected while at the same time submitting a value from a hidden field in order to provide a dynamic item total?

I hope this isn't too confusing.

Thanks for your help

  • 2
  • 2
1 Solution
Dennis MaederCommented:
I see your problem. Please tell me if this is correct.
  You have a series of checkboxes.
  Changing state calls a handler function.
  e.g. <input name="Add Side_1" type="checkbox" value="600" onclick="boxchk(this,2)
  You want to track the total price but unit cost is not (yet) encoded in the function calls.
  Your boxchk function checks the state of all checkboxes in a group and counts the number that are checked.
This being so, your problem is structural. At the very least you have a maintenance nightmare on your hands.
Far better is to set up an array (or arrays) in javascript which contain unit_price, class, max_cnt and min_cnt corresponding to the checkbox name/id/index (unique identifier). That way you can calculate total cost directly and populate the appropriate field.
steverguyAuthor Commented:
I see what you're saying.  I'm not proficient at Javascript, I've been learning as I go, so bear with me...
I'm sure I can find away to right a javascript function that will do that - here's where it gets tough.  Each Modifier Group has Modifiers.  Each group can receive multiple selections, and each selection may or may not have a price associated with it.  Since I the MenuModifierID value takes up the checkbox.value field (which I need for my .asp process page), how do I send the modifier price, which I've loaded into a seperate hidden field, to a function on an OnClick event?
Dennis MaederCommented:
If your data model can be built into an array you don't need to deal with hidden fields. Think of the arrays as a flexible but ordered centralized collection of hidden fields that you use to populate your form. Even the MenuModifierID can live there. When you change any field, you update the appropriate array element, then do your math and conditional stuff with the array to generate a price and order description. Its an approach which is also intrinsically database friendly and as your menu grows you would build your primary pricing model in the database.

Here's a serving suggestion/sketch/skeleton to give you the feel of a possible data structure.
head level script can go in external js include

<script language='javascript'>
// Item(group_id,title,unit_price)
Group1=new Array(1,"Add Side",0,2,2);
  Item1_1=new Array(1,"French fries",1.50);
  Item1_2=new Array(1,"Chips",0.75);
Group2=new Array(2,"Add Topping",0,2,1);
  Item2_1=new Array(2,"SWeat",0,0);
Group3=new Array(3,"NO",1,2,4);
  Item3_1=new Array(3,"pickles",0);
  Item3_2=new Array(3,"lettuce",0);
  Item3_3=new Array(3,"cheese",0);
  Item3_4=new Array(3,"mayo",0);

//static variables
var BasePrice=4.95;
var Quantity=1;

function table_from_array{ // read arrays and vars write controls

function update (obj){//update arrays given a change in form
if (chkbox(obj)) return false; //check for out of limit checkbox count
return ;

function recalculate{
//calculate price from arrays/vars
return price;

function populate_form{//put default values into form
<input name='somename'    type=checkbox onclick='update(this)'
<input name='anothername' type=checkbox onclick='update(this)'
<script language='javascript'>populate_form();</script>

steverguyAuthor Commented:
Thanks for your help!  I'll give this a try
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.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now