easy way to handle new content from dynamic populated tables?

Question

I've been with this for weeks and I couldn't find any "easy/fast" way for such mundane implementation. Im limited by knowing only php and html (at the moment) but I finally did get what I wanted using some javascript without knowing it at depth and I ended with a ugly few hundreds of code. But now that im more lightheaded I was wondering if there is some simple way to do this simple thing and improve my previous work:

I have a DB with Table1 with n Items and Table 2, I want to display the price from Table 1 then been able to input a quantity in the user side, and automatically show the row Subtotal, when all the items are populated, then show a Grandtotal as the user inputs data. Then read all the rows and insert the new info (quantity and subtotal) to the DB's Table2.

Something like this but with n Rows
(yellow=DB data, Blue=User inputs, Greens=dynamic fields)

Then get all those n Rows into the DB Any headlights for a simple way to do this?(even if it include Jquery or JS, im not THAT afraid to them anymore) (I will not post my code because is crap, basically I ended listen all posible rows then inserting them on the Table2 if the subtotal was more than 0) Thanks in advance!

Answer 1

If hope this 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>

The 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);
    }
}
?>