After successfully fixing one problem and making adjustments, I encountered a new issue with my form where the total sum wouldn't calculate unless all fields were filled out. Sometimes, I only have 2-4 entries that need to be factored into the quote. I am looking to modify the JavaScript to ensure it calculates any sum in the form, regardless of the number of products (1-10) entered in the current build.
jQuery(function($) {
$(".qty, .tradeprice").change(function() {
var total = 0;
$(".qty").each(function() {
var $qty = $(this),
$row = $qty.closest('tr'),
$tradePrice = $row.find('.tradeprice'),
$subtotal = $row.find('.subtotal');
subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
total += subtotal;
$subtotal.val(subtotal);
});
$('.total').val(total);
}).change();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='insert.php' method='post'>
<table width='60%' border='1' align='center' class='td'>
<tr>
<th width='26%' height='21' scope='col'>Customer ID</th>
<td width='25%'><input type='text' name='CustomerID' id='CustomerID' /></td>
<th height='24'>Revision</th>
<td><input type='text' name='QuoteRevision' id='QuoteRevision' value="NEW" /></td>
</tr>
<tr>
<th>Customer Name</th>
<td><input type='text' name='CustomerName' id='CustomerName' /></td>
<th height='24'>Customer Suburb</th>
<td><input type='text' name='CustomerSuburb' id='CustomerSuburb' /></td>
</tr>
<tr>
<th height='24'>Customer Address</th>
<td><input type='text' name='CustomerAddress' id='CustomerAddress' /></td>
<th height='24'>Customer Postcode</th>
<td><input type='text' name='CustomerPostcode' id='CustomerPostcode' /></td>
</tr>
<tr>
<th height='24'> </th>
<td> </td>
<th> </th>
<td> </td>
</tr>
<tr>
<th height='24'> </th>
<td> </td>
<th> </th>
<td> </td>
</tr>
</table>
<p> </p>
<table width='60%' border='1' align='center' class='td'>
<tr>
<th>F01U</th>
<th>Model</th>
<th>Description</th>
<th>Trade Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
(Input fields here, dynamically added)
</table>
</form>