Javascript从mysql计算小计和总计

时间:2014-09-26 00:32:10

标签: javascript php mysql

首先,如果此问题已经被提出并解决过,我很抱歉,但我无法找到问题的确切答案/解决方案。

我的问题是,如果用户更改数量和/或选择更多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,',','.');
}

那么,如何计算每个产品的小计并在总文本字段中显示? 我已经搜索了谷歌,但无法解决我的问题。

1 个答案:

答案 0 :(得分:0)

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