在数组循环中调整Javascript价格和数量

时间:2014-02-21 11:01:28

标签: javascript php jquery arrays getelementbyid

我正在使用文本框作为“数量”字段来更新< p>与项目的小计。我有这个工作伟大的我的while循环(PHP)中的第一项。但是,每个连续项目都不会调整范围。

我的PHP:

<?php $furniture = mysql_query("SELECT * FROM tbl_furniture WHERE furniture_active = '1'");
    while($row = mysql_fetch_array($furniture))
    {
        ?>

    <div class="one-third column">
        <h3><img src="images/<?php echo $row['furniture_image1'];?>" width="300" height="300"></h3>
<?php $furniture_price = $row['furniture_price'];
$furniture_id = $row['furniture_id'];?>
<div id="content">
<table width="100%" border="0">
    <tr>
        <td class="price">
            <p class="furn_itemprice" id="price">&pound;<?php echo $furniture_price;?></p><input name="price[]" type="hidden" value="<?php echo $furniture_price;?>"><input name="furniture_id[]" type="hidden" value="<?php echo $furniture_id;?>">
        </td>
        <td class="quantity">
            <input name="qty[]" type="text" id="quantity" value="" class="calc"/><br />
        </td>
    </tr>

    </table>
    <br />
    <p class="totals" id="subtotal">Sub-total:</p>

</div>     
</p>

<?php } ?>

javascript函数看起来像这样:

var stock = {}
window.onload=function() {
var inputs = document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++) {
if (inputs[i].type=="text" && inputs[i].id.indexOf('quantity')!=-1) {
  var name = inputs[i].id.replace('quantity','');
  stock[name] = parseFloat(document.getElementById('price').innerHTML.replace('£',''))
  inputs[i].onchange=function() {
    var total = 0;
    for (var furn_item in stock) {
      var q = document.getElementById("quantity").value;
      total += (isNaN(q) || q=="")?0:parseInt(q)*stock[furn_item]
    }
        document.getElementById('subtotal').innerHTML="Sub-total: £"+total.toFixed(2);      

   }  
  }
 }
}

我不确定我需要做什么,但我认为问题出现在Sub-total:

没有唯一的id / name?

2 个答案:

答案 0 :(得分:1)

你可以给每个元素一个唯一的ID,如:

<?php $furniture = mysql_query("SELECT * FROM tbl_furniture WHERE furniture_active = '1'");
    $i=0 // init counter
    while($row = mysql_fetch_array($furniture))
    {...

   ...
   <p class="furn_itemprice" id="price<?php echo $i++;?>">&pound;<?php ec... // append counter to element id
   ...

  var q = document.getElementById("quantity"+i).value;

此外,您不应将mysql*用于新代码,而是由mysqli*

取代

我个人更喜欢PDO用于php数据库连接

答案 1 :(得分:1)

如评论中所述,您的代码会生成多个具有相同ID的HTML元素。 id必须在整个页面上是唯一的。这就是你的代码不起作用的原因。

您想要实现的是为每一行/每件家具提供不同的ID,并相应地绑定JavaScript处理程序。使用jQuery更容易。您可以创建具有包含价格的属性的数量字段:

<input name="qty[]" type="text" data-price="<?php echo $furniture_price;?>" value="" class="quantity"/>

然后,在jQuery中,您可以获得具有类数量的所有元素:

var sum = 0;
$(".quantity").each(function() {
    sum += $(this).val() * $(this).attr('data-price');
});
$("#subtotal").text(sum);

所以,你可以在没有jQuery的情况下实现类似的东西。我希望这能让你了解如何解决问题。