Question

我正在使用文本框作为“数量”字段来更新＆lt; 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？

Answer 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数据库连接

Answer 2

如评论中所述，您的代码会生成多个具有相同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的情况下实现类似的东西。我希望这能让你了解如何解决问题。

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

2 个答案: