0

A gentleman helped get the function to sum the table's input fields, which works great here. However, in my situation, the function runs on page load, the else{} runs, but there is no output into the destination input fields, nor does this show any error in the console log. I thought that you might have run into a similar situation and could have the answer to that...?

strong text The script gets the data from server and builds the page, including the table with about 11 columns containing these input field and multiple rows. If I change any of the columns' values, the function sums that row's total and outputs the result correctly, but not on load. This is the original answer

function sum_row_qty(el) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest("tr")
    parent.querySelectorAll('.size_qty').forEach(function(e) {
      rowTotal += parseFloat(e.value)
    })
    parent.querySelector('.qty').value = rowTotal
  } else {
    document.querySelectorAll("#tableRows > tr > td:first-child input").forEach(sum_row_qty);
  }
}

window.addEventListener("load", () => sum_row_qty());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="tableRows">
    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
    </tr>


    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="6" onchange="sum_row_qty(this);"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="3" onchange="sum_row_qty(this);"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
    </tr>
  </tbody>
</table>

I have tried waiting for the page to be ready, but still:

$(document).ready(function(){
    sum_row_qty();
});

Thank you!

Thank you!

onit
  • 2,275
  • 11
  • 25
  • because a `load` event can come from different parts of the loading of your page, such as simply an image or an icon, or any link in the `` etc... while the page is not yet fully loaded. – Mister Jojo Sep 29 '22 at 03:10
  • `a load event can come from different parts of the loading of your page` - no *The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images* - the documentation clearly states that *All events named load will **not** propagate to Window* - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event – Jaromanda X Sep 29 '22 at 03:14
  • your code correctly sets the third column to the sum of the first two on window load - I don't see the issue – Jaromanda X Sep 29 '22 at 03:19
  • https://stackoverflow.com/questions/196702/where-to-place-javascript-in-an-html-file – Mister Jojo Sep 29 '22 at 03:49

0 Answers0