Javascript从mysql计算小计和总计

Question

首先，很抱歉，如果之前已经提出并解决了这个问题，但我找不到我的问题的确切答案/解决方案。

我的问题是，如果用户更改数量和/或选择超过 1 个产品，我如何计算总计？我的产品项目列表和值来自 mysql。

这是我的表单详细信息：

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

我使用我的 php/mysql 结果值作为我的输入字段名称/id，因为提交时我更容易识别/传递值。

这是我的 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,',','.');
}

那么，如何计算每个产品的小计并将其显示在总计文本字段中？ 我已经在 Google 上搜索过，但无法解决我的问题。

Answer 1

1) 使用正确的 ID

数量字段的id与函数中的getElementById不匹配。它应该以“qty_”开头，而不是直接以产品代码开头。另外，为了规律起见，将<input>中的id从“qty”改为“qty_”。

2) 正确的结构

您现在使用的 html，具有相同 ID 的双倍数量和小计 <input> 字段。这会导致 Javascript 无法访问这些值。确保区分这些输入字段的名称和 ID。

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" />';

这会导致每个产品包含三个输入字段：

• 每个产品的价格 (id="price_THEPRODUCTCODE")
• 一个用于数量 (id="THEPRODUCTCODE")
• 还有一个用于小计 (id="sub_THEPRODUCTCODE")

Javascript

我建议使用 jQuery 库来更快、更轻松地从此处的输入字段中收集数据。

函数将是：

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);
 
}