Calculating Grand Total using javascript

I am building a shopping cart, and I am having trouble getting the Grand total;
 my table has four colums,
( Product Name : Unit price: Quantity: Cost )

How would I go about adding the data in the" COST" colum, and displaying,please note I am not that knoweldgeable so if you can explain it to me as simple and as complete as possible with a simple working example that would be great ,the rows in the table are dynamic.
k0rxt2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

WoodyRoundUpCommented:
function checkCost(whichCost)
{
        var counter=0;
        for (var i=0; i<document.shop_cart.length; i++)
        {

            if (document.shop_cart[i].name=="cost[]")
                   counter++;

                   if (counter == whichCost)
                   {
                            document.shop_cart[i].value = document.shop_cart[i-1].value * document.shop_cart[i-2].value;
                            break;
                   }

        }
}

<form name="shop_cart" action="your_action_form" method="post">
<table cellpadding="0" cellspacing="0">
         <tr><td>Product Name</td><td>Unit price</td><td>Quantity</td><td>Cost </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="_ADD_UNIT_COST_HERE"></td><td><input type="text" name="quantity[]" value="_ADD_QUANTITY_HERE" onkeyup="checkCost(1);"></td><td><input type="text" name="cost[]" value="_ADD_INITIAL_COST_HERE" readonly> </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="_ADD_UNIT_COST_HERE"></td><td><input type="text" name="quantity[]" value="_ADD_QUANTITY_HERE" onkeyup="checkCost(2);"></td><td><input type="text" name="cost[]" value="_ADD_INITIAL_COST_HERE" readonly> </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="_ADD_UNIT_COST_HERE"></td><td><input type="text" name="quantity[]" value="_ADD_QUANTITY_HERE" onkeyup="checkCost(3);"></td><td><input type="text" name="cost[]" value="_ADD_INITIAL_COST_HERE" readonly> </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="_ADD_UNIT_COST_HERE"></td><td><input type="text" name="quantity[]" value="_ADD_QUANTITY_HERE" onkeyup="checkCost(4);"></td><td><input type="text" name="cost[]" value="_ADD_INITIAL_COST_HERE" readonly> </td></tr>
</table>
</form>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WoodyRoundUpCommented:
i believe all your data are from the database right?
therefore, you should have the initial data.
then what we do here is actually to check the form, to see if there is any textbox with the name of "cost[]", then you should take the value of the previous element multiplied by the value of the second previous element.
This is supporting dynamic, because you only need to add in a value in the checkCost(), because this is where it prevents the javascript to check all page.
however, if you want the system to check for all page, then we could change the script a little bit, and it will check all elements input.

hope this is understandable. :p

thank you.
k0rxt2Author Commented:
I apologise, I just re-read what i wrote, i think I might have pointed you in the wrong direction.

Yes my data comes from the database, except for the quantity, which is static field in the database and popuates the qty field with a "1".

The user will the enter in a new quantity which should updates the COST field.

Finally I would like to display the GRAND TOTAL , in which you will add all the prices in the COST colum together to give the Final Cost.



Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

WoodyRoundUpCommented:
<html>
<head>
<script type="text/javascript">
<!--
function checkCost()
{
        var counter=0;
        var grandtotal=0;
        for (var i=0; i<document.shop_cart.length; i++)
        {
            if (document.shop_cart[i].name=="cost[]")
            {
                  unitprice = (document.shop_cart[i-2].value);
                          quantity = (document.shop_cart[i-1].value);
                          document.shop_cart[i].value = unitprice * quantity;
                  grandtotal += parseFloat(document.shop_cart[i].value);
            }
        }
        document.shop_cart.grandtotal.value = grandtotal;
}
-->
</script>
</head>
<body onload="checkCost();">
<form name="shop_cart" action="your_action_form" method="post">
<table cellpadding="0" cellspacing="0">
         <tr><td>Product Name</td><td>Unit price</td><td>Quantity</td><td>Cost </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="10"></td><td><input type="text" name="quantity[]" value="1" onkeyup="checkCost();"></td><td><input type="text" name="cost[]" value="" readonly> </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="20"></td><td><input type="text" name="quantity[]" value="1" onkeyup="checkCost();"></td><td><input type="text" name="cost[]" value="" readonly> </td></tr>
         <tr><td>_DISPLAY_PRODUCT_NAME_HERE</td><td>_DISPLAY_UNIT_COST_HERE <input type="hidden" name="unitprice[]" value="30"></td><td><input type="text" name="quantity[]" value="1" onkeyup="checkCost();"></td><td><input type="text" name="cost[]" value="" readonly> </td></tr>
         <tr><td colspan="4" align="right"><input type="text" name="grandtotal" value="" readonly> </td></tr>
</table>
</form>
</body>
</html>
WoodyRoundUpCommented:
Please replace the value of _DISPLAY_UNIT_COST_HERE and the value in the unitprice[] input element to the one in your database.
COBOLdinosaurCommented:
Woody,

As it is currency you are working with to get the decimals right you probably want to use fixed and avoid any possibility of getting burned by the javascript tendency to generate incorrect values for float arithmetic:

I would change the calculations to this way perhaps:

unitprice = new Number (document.shop_cart[i-2].value);
                      quantity = new Number (document.shop_cart[i-1].value);
                     totalval = new Number(unitprice * quantity);
                    document.shop_cart[i].value=totalval.toFixed(2);
                  grandtotal += totalval;
            }
        }
        document.shop_cart.grandtotal.value = grandtotal.toFixed(2);

You're doing a good job.  Keep it up.

Cd&
WoodyRoundUpCommented:
Thank you for the input.

I did not put the toFixed in there, because I got an error in my localhost.
LOL.
Probably I just do a toFixed without declaring any new Number instance.

Thanks for that. I'll remember now. :p

Woody
ZvonkoSystems architectCommented:
What server side scripting language do you use for page composition? ASP, PHP, JSP, Perl?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.