Calculating inside an html table

[Setzi138]

<tr style="height: 55px;">
                        <td class="u-table-cell">Pizza</td>
                        <td class="u-table-cell"></td>
                        <td class="u-table-cell">5$</td>
                        <td class="u-table-cell">
                          <form id="quantity">
                            <input type="number" min="0" id="quantity" value="0" step="1.0">
                          </form>
                        </td>
                        <td class="u-table-cell"> ##Calculation here## </td>
                      </tr>

I want that the price is fixed and the user inserts the amount he wants in the last column should then be calculated Amount*price and print it out in the table

this should happe live without refreshing

 

is there a possibility to do it with php or any other way without javascript ?

[requinix]

With PHP? Yes, but not in a good way.

Javascript is the answer. Why do you want to avoid it?

[Setzi138]

Unfortunatly i am not allowed to use it from the company side

but how would i use it ?

maybe i can convince them if it works 

[ginerjm]

You have to remember that PHP only runs on the server so anything you want calculated either has to be done on the server and sent back to your form or you must use a client-side tool to do the calc and place it on the screen.  That is usually JS.  Pretty simple thing to do.  Add an onblur or onchange call to the quantity field and have it call a funciton that does the calc and populates the extended price field.

[requinix]

5 hours ago, Setzi138 said:

Unfortunatly i am not allowed to use it from the company side

That's ridiculous. Fight it.

 

5 hours ago, Setzi138 said:

but how would i use it ?

By adding an event listener for the quantity textbox's "input" event (when someone changes the value), doing the math, and updating the table cell.

There are other HTML markup changes I would recommend to assist with that, but we're not at that point yet.

[Setzi138]

I'm really a beginner with javascript 
i would need a little more details 😅

in the file below you cann see the site 

the task is that i watn the people to manuelly insert into "Menge" german for quantity

and the "Gesamtpreis" Total should be calculated automatically form "Einzelpreis"*"Menge" or price*quantity

 

<tr style="height: 55px;">
                        <b>
                        <td class="u-table-cell u-table-cell-1"><b>Produkt</b><span style="font-weight: 700;"></span>
                        </td>
                        <td class="u-table-cell"></td>
                        <td class="u-table-cell u-table-cell-3"><b>Einzelpreis</b></td>
                        <td class="u-table-cell u-table-cell-4"><b>Menge</b></td>
                        <td class="u-table-cell u-table-cell-5"><b>Gesamtpreis</b></td>
                        </b>
                      </tr>
                      <tr style="height: 55px;">
                        <td class="u-table-cell">Kornspitz</td>
                        <td class="u-table-cell"></td>
                        <td class="u-table-cell">
                          <p value="1,39">1,39 €</p>
                        </td>
                        <td class="u-table-cell">
                          <form id="Menge">
                            <input type="number" min="0" id="quantity" value="0" step="1.0">
                          </form>
                        </td>
                        <td class="u-table-cell">
                          <form id="sum">
                            <p><output id="field_sum" for="quantity">0</output> €</p>
                          </form>
                        </td>
                      </tr>

 

 

[Barand]

Here's an example script using this test data

+------+---------+-------+
| id   | product | price |
+------+---------+-------+
| A001 | Widget  | 10.99 |
| B002 | Gizmo   | 3.49  |
| C003 | Thingy  | 56.25 |
| D444 | Wotsit  | 2.25  |
+------+---------+-------+

Code

<?php
require 'db_inc.php';


if ($_SERVER['REQUEST_METHOD']=='POST') {
    echo "Submitted form data:<br>";
    echo '<pre>' . print_r($_POST, 1) . '</pre>';
  
    // process the data here
}

$res = $db->query("SELECT product_id as id
                        , product_name as product
                        , price
                   FROM product     
                  ");
$tdata = '';
foreach ($res as $row) {
    $tdata .= <<<TDATA
        
        <tr>
            <td>{$row['product']}</td>
            <td class='price ra' data-id='{$row['id']}' data-val='{$row['price']}'>{$row['price']} &euro;</td>
            <td class='ra'> <input type='number' class='qty' data-id='{$row['id']}' name='qty[{$row['id']}]' value='0'></td>
            <td class='total ra' data-id='{$row['id']}' >0 &euro;</td>
        </tr>
        
TDATA;
}
?> 
                           
      
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript'>
    $().ready( function() {
        
        $(".qty").change( function() {
            var qty = $(this).val()
            var id = $(this).data("id")
            var price = $(".price[data-id="+id+"]").data("val")
            var tot = (qty * price).toFixed(2)
            $(".total[data-id="+id+"]").html(tot+" &euro;")
        })
    })
</script>
<style type='text/css'>
    table {
        width: 600px;
    }
    tr {
        height: 55px;
        vertical-align: middle;  
    }
    th, td {
        padding: 0 16px;
    }
    .qty {
        width: 50px;
    }
    .ra {
        text-align: right;
    }
</style>
</head>
<body>
<form method='post'>
<table>
    <tr><th>Produkt</th>
        <th>Einzelpreis</th>
        <th>Menge</th>
        <th>Gesamtpreis</th>
    </tr>
    <?=$tdata?>
</table>
<input type='submit' value='Submit'>
</form>
</body>
</html>

Sample output