Javascript Price and Quantity adjustment within an array loop

Question

I'm using a text box as a "quantity" field that updates a < p > with the subtotal of the item. I have this working great for the first item in my while loop (php). Each consecutive item does not adjust the span however.

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

With the javascript function looking like this:

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

   }  
  }
 }
}

I'm not sure what I need to do, but I presume somehow the problem lies with the Sub-total:

not having a unique id/name??

Answer 1

you could give each element a unique id like:

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

and

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

Also you should not use mysql* for new code, it's been superceeded by mysqli*

personally I prefer PDO for php database connections

Answer 2

As said in the comment, your code generates multiple HTML elements with the same id. An id must be unique on the entire page. That's why your code doesn't work.

What you want to achieve is to give different ids for every row / piece of furniture and bind the JavaScript handlers accordingly. It's easier with jQuery. You could create quantity fields that have an attribute that contains the price:

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

Then, in jQuery, you could get all elements with the class quantity:

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

So, you can achieve something similar without jQuery, for sure. I hope this gives you an idea how to solve your problem.