Javascript calculate subtotal and total from mysql

Question

First of all, I'm sorry if this question has already been asked and solved before, but I cant find the exact answer/solution for my problem.

My question is, how do I calculate grand-total if a user changes quantity and/or selects more that 1 product? My product item list and value is from mysql.

Here's my form details:

<?php $price = 10.00;?>
<input name="qty_<?php echo $obj->product_code;?>" type="text" id="qty<?php echo $obj->product_code;?>" value="0" size="2" onkeyup="calculate()">

<input name="subtotal_<?php echo $obj->product_code;?>" type="text" id="subtotal_<?php echo $obj->product_code;?>" value="0.00" size="7" readonly>

<input name="qty_<?php echo $obj->product_code;?>" type="text" id="qty<?php echo $obj->product_code;?>" value="0" size="2" onkeyup="calculate()">

<input name="subtotal_<?php echo $obj->product_code;?>" type="text" id="subtotal_<?php echo $obj->product_code;?>" value="0.00" size="7" readonly>

<input name="grandtotal" type="text" id="grandtotal" value="0.00" readonly>

I'm using my php/mysql results value for my input field name/id, as it's easier for me to identify/pass the value when submitted.

Here's my Javascript:

function calculate()
{
    var quantity = document.getElementById('<?php echo $obj->product_code;?>').value;
    var currprice = <?php echo $obj->product_code.$obj->product_price;?>;
    var total = quantity * currprice;
    document.getElementById('subtotal_<?php echo $obj->product_code;?>').value = total.formatMoney(2,',','.');
}

So, how do I calculate the subtotal from each product and display it at grand total text field? I've already searched Google but have not been able to solve my problem.

Answer 1

1) Using the right ID's

The id's of the quantity fields do not match with the getElementById in the function. It should start with "qty_", not directly the product code. Also, for the sake of regularity, change the id's in the <input> 's from "qty" to "qty_".

2) The right structure

The html you use now, has double quantity and subtotal <input> fields with the same ID. This causes Javascript to be unable to access these values. Make sure you distinguish between the names and ID's of these input fields.

PHP :

 $products = array( array("price"=>10, "code"=>"product1"), array("price"=>25, "code"=>"product2") ); foreach($products as $key => $productInfo) { /* echo a hidden field with the price per product (for calculation later) */ echo '<input type="hidden" name="price_'. $productInfo["code"] .'" id="price_'. $productInfo["code"] .'" value="'. $productInfo["price"] .'" />'; /* echo the quantity field for this product */ echo '<input class="qty" name="'. $productInfo["code"] .'" id="'. $productInfo["code"] .'" type="text" value="0" size="2" onkeyup="calculate()">'; /* echo the subtotal field for this product */ echo '<input name="sub_'. $productInfo["code"] .'" type="text" id="sub_'. $productInfo["code"] .'" value="0.00" size="7" readonly>'; } /* echo the field for total price */ echo '<input type="text" name="total" id="total" value="0.00" />'; 

This results in sets of three input fields per product:

• One for the price per product (id="price_THEPRODUCTCODE")
• One for the quantity (id="THEPRODUCTCODE")
• And one for the subtotal (id="sub_THEPRODUCTCODE")

Javascript

I suggest using the jQuery library for faster and easier collection of the data from the input fields here.

The function would then be:

 function calculate() { var total = 0; // for each quantity field: $("input.qty").each(function() { // get product code var productCode = $(this).attr("id"); // get price per product var price = $("#price_"+productCode).val(); // get quantity var quantity = $(this).val(); // calculate subtotal var subtotal = (price*quantity); // put new subtotal back in the input field $("#sub_"+productCode).val(subtotal); // add subtotal to total total += subtotal; }); // put total in the input field of total $("#total").val(total); }