Update Total Price on the Fly using Javascript

Posted on 2006-05-16
Last Modified: 2008-03-17
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

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=";"

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

Question by:steverguy
    LVL 10

    Expert Comment

    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.
    LVL 1

    Author Comment

    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?
    LVL 10

    Accepted Solution

    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>

    LVL 1

    Author Comment

    Thanks for your help!  I'll give this a try

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    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…

    761 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

    10 Experts available now in Live!

    Get 1:1 Help Now