Automatically fill input field with result of calculation


The issue is not complicated but I cannot make it work and don't know if I'm following the correct approach.

I have a table with several rows and 3 columns. Each column with an input field for a number. The 3rd column must be calculated automatically by multiplying the 1st column value by the second. enter image description here

<table class="table table-striped table-bordered proposal-table" id="proposal-table">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Cost price per unit</th>
            <th>Total cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                @Html.EditorFor(model => model.Products[0].Quantity, new { htmlAttributes = new { @class = "form-control variable-field", @type = "number" } })
            </td>
            <td>
                @Html.EditorFor(model => model.Products[0].CostPriceUnit, new { htmlAttributes = new { @class = "form-control variable-field", @type = "number" } })
            </td>
            <td>
                @Html.EditorFor(model => model.Products[0].TotalCostPrice, new { htmlAttributes = new { @class = "form-control width-80", @type = "number" } })
            </td>
        </tr>
        <tr>
        <!-- ... -->
        </tr>
    </tbody>
</table>

My script:

<script>
    $(document).ready(function () {
        //When there are changes in the input fields of the 1st or 2nd column we calculate the totalCost
        $('.variable-field').bind("change", function () {
            var currentTD = $(this).parents('tr').find('td');
            var totalCost = Number(currentTD[0].firstChild.value) * Number(currentTD[1].firstChild.value);
            //The substring is to round the number to 4 decimal places
            currentTD[2].firstChild.value = totalCost.toString().substring(0, totalCost.toString().indexOf(".") + 4);
            alert(totalCost);
        });
    });
</script>

The alert on the code is showing "NaN".

You're using an odd mix of jQuery and plain JS which is confusing matters.

You can simplify the logic if you put common classes on the fields where the values will be entered in to. In the example below I used .quantity, .costpriceunit and .totalcostprice.

From there you can easily get the parent tr and find() the relevant fields within it to read and update their values. I'd also suggest making the total field readonly. Try this:

$(document).ready(function() {
  $('.variable-field').on("input", function() {
    var $row = $(this).closest('tr');
    var qty = $row.find('.quantity').val() || 0;
    var costprice = $row.find('.costpriceunit').val() || 0;
    $row.find('.totalcostprice').val(qty * costprice);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered proposal-table" id="proposal-table">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Cost price per unit</th>
      <th>Total cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" class="form-control variable-field quantity" name="Quantity" /></td>
      <td><input type="number" class="form-control variable-field costpriceunit" name="CostPriceUnit" /></td>
      <td><input type="number" class="form-control width-80 totalcostprice" name="TotalCostPrice" readonly /></td>
    </tr>
    <tr>
      <td><input type="number" class="form-control variable-field quantity" name="Quantity" /></td>
      <td><input type="number" class="form-control variable-field costpriceunit" name="CostPriceUnit" /></td>
      <td><input type="number" class="form-control width-80 totalcostprice" name="TotalCostPrice" readonly /></td>
    </tr>
  </tbody>
</table>