jQuery NaN form requires NULL atribute

Question

i just had one problem fixed which worked well and i had to change a few things for adjustments but now that i have got things sorted the total sum of the form won't calculate unless the form is full and sometimes i mite have only 2-4 entries that need to go into the quote, i need to modify the JS to calculate any sum in the form which could be 1-10 products in this current build.

Functional script

With NaN Error

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'>&nbsp;</th>
      <td>&nbsp;</td>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th height='24'>&nbsp;</th>
      <td>&nbsp;</td>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
    </tr>
  </table>
  <p>&nbsp;</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>
    <tr>
      <th><input type='text' name='po11' id='po11' /></th>
      <td><input type='text' name='po12' id="po12" /></td>
      <td><input type='text' name='po13' id="po13" /></td>
      <td>$<input type="text" name='po14' class='tradeprice' id="po14" value="0" /></td>
      <th><input type="text" name='po15' class='qty' id="po15" value="0" /></th>
      <td><input type='text' name='po16' class='subtotal' id="po16" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po21' id='po21' /></th>
      <td><input type='text' name='po22' id="po22" /></td>
      <td><input type='text' name='po23' id="po23" /></td>
      <td>$<input type="text" name='po24' class='tradeprice' id="po24" value="0" /></td>
      <th><input type="text" name='po25' class='qty' id="po25" value="0" /></th>
      <td><input type='text' name='po26' class='subtotal' id="po26" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po31' id='po31' /></th>
      <td><input type='text' name='po32' id="po32" /></td>
      <td><input type='text' name='po33' id="po33" /></td>
      <td>$<input type="text" name='po34' class='tradeprice' id="po34" value="0" /></td>
      <th><input type="text" name='po35' class='qty' id="po35" value="0" /></th>
      <td><input type='text' name='po36' class='subtotal' id="po36" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po41' id='po41' /></th>
      <td><input type='text' name='po42' id="po42" /></td>
      <td><input type='text' name='po43' id="po43" /></td>
      <td>$<input type="text" name='po44' class='tradeprice' id="po44" value="0" /></td>
      <th><input type="text" name='po45' class='qty' id="po45" value="0" /></th>
      <td><input type='text' name='po46' class='subtotal' id="po46" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po51' id='po51' /></th>
      <td><input type='text' name='po52' id="po52" /></td>
      <td><input type='text' name='po53' id="po53" /></td>
      <td>$<input type="text" name='po54' class='tradeprice' id="po54" value="0" /></td>
      <th><input type="text" name='po55' class='qty' id="po55" value="0" /></th>
      <td><input type='text' name='po56' class='subtotal' id="po56" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po61' id='po61' /></th>
      <td><input type='text' name='po62' id="po62" /></td>
      <td><input type='text' name='po63' id="po63" /></td>
      <td>$<input type="text" name='po64' class='tradeprice' id="po64" value="0" /></td>
      <th><input type="text" name='po65' class='qty' id="po65" value="0" /></th>
      <td><input type='text' name='po66' class='subtotal' id="po66" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po71' id='po71' /></th>
      <td><input type='text' name='po72' id="po72" /></td>
      <td><input type='text' name='po73' id="po73" /></td>
      <td>$<input type="text" name='po74' class='tradeprice' id="po74" value="0" /></td>
      <th><input type="text" name='po75' class='qty' id="po75" value="0" /></th>
      <td><input type='text' name='po76' class='subtotal' id="po76" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po81' id='po81' /></th>
      <td><input type='text' name='po82' id="po82" /></td>
      <td><input type='text' name='po83' id="po83" /></td>
      <td>$<input type="text" name='po84' class='tradeprice' id="po84" value="0" /></td>
      <th><input type="text" name='po85' class='qty' id="po85" value="0" /></th>
      <td><input type='text' name='po86' class='subtotal' id="po86" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po91' id='po91' /></th>
      <td><input type='text' name='po92' id="po92" /></td>
      <td><input type='text' name='po93' id="po93" /></td>
      <td>$<input type="text" name='po94' class='tradeprice' id="po94" value="0" /></td>
      <th><input type="text" name='po95' class='qty' id="po95" value="0" /></th>
      <td><input type='text' name='po96' class='subtotal' id="po96" readonly="true" /></td>
    </tr>
    <tr>
      <th><input type='text' name='po101' id='po101' /></th>
      <td><input type='text' name='po102' id="po102" /></td>
      <td><input type='text' name='po103' id="po103" /></td>
      <td>$<input type="text" name='po104' class='tradeprice' id="po104" value="0" /></td>
      <th><input type="text" name='po105' class='qty' id="po105" value="0" /></th>
      <td><input type='text' name='po106' class='subtotal' id="po106" readonly="true" /></td>
    </tr>
    <tr>
      <th height='24' colspan="6">Total:<input type='text' name='Total' class='total' readonly="true" /></th>
    </tr>
    <tr>
      <th height='24' colspan="6">
        <div id='submit'><input type='submit' /></div>
      </th>
    </tr>
    <tr>
      <th height='24' colspan="6">&nbsp;</th>
    </tr>
  </table>
</form>

Answer 1

NaN stands for "Not a Number". You may want to try <input type="number"> instead of text as you want numbers. Also, before adding the value, check whether the parsing is successful.

subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
if(!subtotal.isNaN())  // only add if the parsing is correct
    total += subtotal;