Calculate sum of input values in for loop

Question

I have a table with 4 columns. The first one is the name of a product, the second has the price per item, the third column has an input field where you can choose how many items you want, and the last column calculates the price per item * number of items.

This calculation works, but I also want to calculate all of these into a total at the bottom of the table.

I know very little javascript, so I'm not sure if I'm using the correct functions or methods. The code consists of PHP, HTML and Javascript.

for ($i = 0; $i < $num_rows; $i++){
  echo '<tr><td>' . $row[$i][0] . '';
    echo '<td id="stkPris_' . $i . '">' . $row[$i][1] . '</td>';
    echo '<td><input type="text" id="antall_' . $i .'" name="antall" size="1" value="0" oninput="calculate(value, this.id)"></td>';
    echo '<td><input type="text" id="pris_' . $i . '" name="pris" size="1" readonly></td></tr>';
}

echo '
    <tr>
            <td><strong>Sum</strong></td>
            <td></td>
            <td></td>
            <td><strong><input type="text" id= "sum" name="sum" size="1" value="0" readonly><strong></td>
    </tr>
</table>';


<script>

    function calculate(value, elementId){
        var i;

        for (i = 0; i < ' . $num_rows . '; i++){

            var stkPris = document.getElementById("stkPris_" + i);
            var antall = document.getElementById("antall_" + i);
            var pris = document.getElementById("pris_" + i);
            var sum = document.getElementById("sum");

            var delsummer = antall.value * stkPris.innerText;

            if(elementId == "antall_" + i){
                pris.value = delsummer;
            }

            sum.value += pris.value;
        }
    }
</script>

How it looks (image)

The total seem to be a string and not a number? I have tried putting the "price per item" into an input instead and use .value instead of .innerText. Didn't do anything.

`sum.value` is a string, so you're doing repeat string concatenation — VLAZ, Jan 23 '20 at 14:44
`for (i = 0; i < ' . $num_rows . '; i++){` <-- what is that mix between JS and php ? — Cid, Jan 23 '20 at 14:45
yeah, that is php code, it's just to get the number of rows in the database table — maggiato, Jan 23 '20 at 14:51

score 1 · Accepted Answer · answered Jan 23 '20 at 15:06

Here is a simple way to calculate stock and price, read code comments to know more.

$(document).ready(function(){
 var totalStock = 0;
 var totalPrice = 0;
 
 $(".stock").each(function(){
  var s = parseInt($(this).text()); // to get the stock count
  var p = parseFloat($(this).parent().find(".price").text()); // to get unit price of this stock
  $(this).parent().find(".sumPrice").html(s*p); // calculate Stock x Price
  totalStock += s; // calculate total Stocks
 });
 
  $(".price").each(function(){
  var p = parseFloat($(this).text()); // to get unit price
  totalPrice += p; // calculate total prices
 });
 
 $(".stockTotal").html(totalStock); // show total stock count
 $(".priceTotal").html(totalPrice); // show total prices
 
 $(".generalTotal").html(totalStock * totalPrice); // calculate all prices x all stock
});

table{
 width:100%;
}

table th, table td{
 border:1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
 <thead>
  <tr>
   <th>#</th>
   <th>Item</th>
   <th>Stock</th>
   <th>Price</th>
   <th>Sum</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>item name</td>
   <td class="stock">25</td>
   <td class="price">17</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>2</td>
   <td>item name</td>
   <td class="stock">1</td>
   <td class="price">12.5</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>3</td>
   <td>item name</td>
   <td class="stock">6</td>
   <td class="price">9.75</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>4</td>
   <td>item name</td>
   <td class="stock">0</td>
   <td class="price">20</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>5</td>
   <td>item name</td>
   <td class="stock">11</td>
   <td class="price">15</td>
   <td class="sumPrice">##</td>
  <tr>
  <tr>
   <td>6</td>
   <td>item name</td>
   <td class="stock">3</td>
   <td class="price">3.25</td>
   <td class="sumPrice">##</td>
  <tr>
 </tbody>
 <tfoot>
  <tr>
  <td colspan="2"></td>
  <td class="stockTotal">#stock total#</td>
  <td class="priceTotal">#price total#</td>
  <td class="generalTotal">#price total x stock total#</td>
  </tr>
 </tfoot>
</table>

Thank you! I will look into that and learn the different functions. I obviously need to learn more javascript. :) — maggiato, Jan 24 '20 at 18:53

Calculate sum of input values in for loop

1 Answers1