Price vs. quantity calculations in a Foreach loop-CodePudding

I would like to calculate the total price per line, by inserting my products from an SQL database.

With the piece of code I made, I can calculate the total if I have only one product in my database. The problem is that I can't have several id attributes with the same name, I know that.

How would it be possible to calculate the total in javascript, and in my HTML code to increment the id qty and price?

This is my code :

<?php
include 'main.php';
check_loggedin($pdo);
$minerals = $pdo->query('SELECT * FROM products WHERE category = "mineral"');
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1">
        <title>Test</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    </head>
    <body >
        <?php include 'navigation.php' ;?>
        <main>
            <div >
                <h2>Caisse</h2>
                <div >
                    <form action="" method="post" >
                        <div >
                            <h3>Minérales</h3>
                            
                            <table>
                                <colgroup>
                                    <col width="5%">
                                    <col width="35%">
                                    <col width="20%">
                                    <col width="20%">
                                    <col width="20%">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>QTY</td>
                                        <td >Product</td>
                                        <td>Unit</td>
                                        <td>Price</td>
                                        <td>Total</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (!$minerals): ?>
                                    <tr>
                                        <td colspan="5" style="text-align:center">There are no minerals</td>
                                    </tr>
                                    <?php endif; ?>
                                    <?php foreach ($minerals as $mineral): ?>
                                    <tr>
                                        <td><input type="text" id="qty" name="qty_mineral" oninput="Calcul_total()"></td>
                                        <td ><?=$mineral['name']?></td>
                                        <td><?=$mineral['unit']?></td>
                                        <td id="price"><?=$mineral['price']?></td>
                                        <td id="total"></td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </body>
</html>
<script>
    
    function Calcul_total() {
        var x = document.getElementById('qty').value;
        var y = document.getElementById('price').textContent;
        document.getElementById('total').innerHTML = x * y;
    }
</script>

I think I either need to be able to increment the qty & price id for each . But I don't see how to do it in php.

And for the calculation in javascript, I would need to be able to get those id increment to do the total. But I don't see how to do it.

So if you could point me in the right direction, I already thank you in advance.

CodePudding user response：

For your function Calcul_total to know on which table line it should operate you need a way for it know the context when it gets called.

The quickest way that would easily fit in your scenario, is to call that function passing the argument this.

So that the function later will focus on that line only instead of querying the whole document while searching for the elements .qty, .price and .total. As you can see I changed your strategy to use the same id for elements repeating on each row, so I preferred to use the class approach instead because id are expected to be unique in the whole document.

I picked part of your code to show the concept (using two lines only for gold and silver):

function Calcul_total(target) {
  const parent = target.closest('tr');
  var x = parent.querySelector('.qty').value;
  var y = parent.querySelector('.price').textContent;
  parent.querySelector('.total').innerText = x * y;
}

<form action="" method="post" >
  <div >
    <h3>Minérales</h3>

    <table>
      <colgroup>
        <col width="5%">
        <col width="35%">
        <col width="20%">
        <col width="20%">
        <col width="20%">
      </colgroup>
      <thead>
        <tr>
          <td>QTY</td>
          <td >Product</td>
          <td>Unit</td>
          <td>Price</td>
          <td>Total</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              
              oninput="Calcul_total(this)">
          </td>
          <td >Gold</td>
          <td>13</td>
          <td >57.22</td>
          <td ></td>
        </tr>
        <tr>
         <td>
            <input
              type="text"
              
              oninput="Calcul_total(this)">
          </td>
          <td >Silver</td>
          <td>43</td>
          <td >35.53</td>
          <td ></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>