Jump to content

Calculating inside an html table


Setzi138
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

 

Unbenannt01.PNG

Link to comment
Share on other sites

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

image.png.35078157c39c6c6ccc405867c4e82d75.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.