An easy way to handle new content from dynamic populated tables?

Question

I have been with this for several weeks, and I could not find a “simple / quick” way for such a mundane implementation. Im limited knowing only php and html (for now), but I finally got what I wanted using some javascript without knowing it in depth, and I ended up with ugly several hundred code. But now, when it became easier for me, I was wondering if there is an easy way to do this simple thing and improve my previous work:

I have a database with table 1 with n elements and table 2, I want to display the price from Table 1, then I could enter the quantity in the user part and automatically show the line Subtotal when all the elements are full, then show Grandtotal when the user enters data. Then read all the rows and insert the new information (quantity and subtotal) into the DB2 table.

Something like this, but with n Rows
(yellow = database data, blue = user inputs, green = dynamic fields)

Then get all these n rows in the database Any lights for an easy way to do this? (Even if this includes jQuery or JS, I’m not afraid of them anymore) (I won’t post my code because it is crap, basically I ended up listening to all possible rows and then pasting them into table2 if the subtotal was greater than 0 ) Thanks in advance!

Answer 1

If it works,

$(document).ready(function() { $('#mytable tr').each(function(i, elem) { var sub = $(elem).find('.sub'); // Update subtotal after the price $(this).find('.price').change(function() { var quant = $(this).parent().next().children('.quant'); sub.val($(this).val() * quant.val()); updateGrand(); }); // Update subtotal after the quantity $(this).find('.quant').change(function() { var price = $(this).parent().prev().children('.price'); sub.val($(this).val() * price.val()); updateGrand(); }); }); // Function for updating the grand total function updateGrand() { var sum = 0; $('#mytable .sub').each(function() { sum += parseInt($(this).val()); }); $('#grand span').text(sum); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action "/someUrl" method="post"> <table id="mytable"> <tr> <th>Price</th> <th>Quantity</th> <th>Subtotal</th> </tr> <tr> <td> <input type="number" class="price" name="price[]" value="0" min="1" /> </td> <td> <input type="number" class="quant" name="quant[]" value="0" min="1" /> </td> <td> <input type="number" class="sub" name="sub[]" value="0" readonly /> </td> </tr> <tr> <td> <input type="number" class="price" name="price[]" value="0" min="1" /> </td> <td> <input type="number" class="quant" name="quant[]" value="0" min="1" /> </td> <td> <input type="number" class="sub" name="sub[]" value="0" readonly /> </td> </tr> <tr> <td> <input type="number" class="price" name="price[]" value="0" min="1" /> </td> <td> <input type="number" class="quant" name="quant[]" value="0" min="1" /> </td> <td> <input type="number" class="sub" name="sub[]" value="0" readonly /> </td> </tr> <tr> <td> <input type="number" class="price" name="price[]" value="0" min="1" /> </td> <td> <input type="number" class="quant" name="quant[]" value="0" min="1" /> </td> <td> <input type="number" class="sub" name="sub[]" value="0" readonly /> </td> </tr> <tr> <td></td> <td>Grand total:</td> <td id="grand"><span>0</span> </td> </tr> </table> <input type="submit" name="submit" value="Submit" /> </form> 

PHP code

 <?php // sample config $servername = "localhost"; $username = "root"; $password = "root"; $dbname = "sample"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn -> connect_error) { die("Connection failed: " . $conn -> connect_error); } if (isset($_POST['submit'])) { $price = $_POST['price']; $quant = $_POST['quant']; $sub = $_POST['sub']; foreach ($price as $key => $p) { $quantdb = $quant[$key]; $subdb = $sub[$key]; $sql = "INSERT INTO table2 (price, quantity, subtotal) VALUES ('$p', '$quantdb', '$subdb')"; $conn->query($sql); } } ?>