What is the alternative to on('input' , to track the indirect change in textbox?

Question

I have a table having 15 rows of text boxes with class foo.

If I write something suppose in the 5th text box I want the same text to be written in all subsequent boxes i.e the 6th, 7th, 8th ... 15th.

The following code has done the job but only when I change value by clicking on input field. But I want the code to work even if value of input field is changed indirectly say by another text box (suppose I have another single textbox and if I write any number there the content of 5th textbox is replaced by the sum of 5th textbox and single textbox).

How to modify the code? I have tried on('change' in place of on('input', but get no result.

jQuery($ => {
  $('.foo').on('input', e => {
    $(e.target).closest('tr').nextAll('tr').find('.foo').val(e.target.value);
  });
});

Answer 1

You can use jQuery.trigger() on the 5th textbox to trigger the input event. So that the subsequent boxes will be updated, too.

Let say we have the 5th textbox and another textbox, and we want to make

the content of 5th textbox is replaced by the sum of 5th textbox and single textbox.

It's not simply set 5thTextbox.value += anotherTextbox.value on input event. Because if you input any word, sentence that has more than 2 chars the thing will be messed up. For example:

• 5thTextbox value: 123
• Input 456 to anotherTextbox. Then the input event would update the 5thTextbox to 123445456. And that's not what you want.

So I make a simple condition, whenever you input the second char into the anotherTextbox. We just have to remove the value of the anotherTextbox at the end of the 5thTextbox. I use regex to achieve that

let startInput = false;
$(document).ready(() => {
  $("table input").on('input', (e) => {
    updatetTextOfNextInputs(e.currentTarget);
  });

  $("#another-input").on("focus blur", (e) => {
    // clear the another input
    e.currentTarget.value = "";
    startInput = false;
  })

  $("#another-input").on('input', (e) => {
    let fifthInputEl = $("table input")[4];
    if (startInput) {
      // The value of the 5th inbox already contains the first char of the another inbox, you have to remove that before sum the new one
      // Use regex to replace
      // have to remove the last char of the value first, using slice()
      var previousValue = e.currentTarget.value.slice(0, -1);
      // use regex to remove value of another textbox out of the end of 5th textbox
      const regex = new RegExp(`${previousValue}$`);
      fifthInputEl.value = fifthInputEl.value.replace(regex, '');
    }
    // input the value at the end
    fifthInputEl.value += `${e.currentTarget.value}`;
    // after input the first char, turn this flag to true
    startInput = true;
    // finally trigger the input to make change to other textboxes
    $(fifthInputEl).trigger('input');
  });
})

function updatetTextOfNextInputs(inputEl) {
  $(inputEl).closest('tr').nextAll('tr').find('input').val(inputEl.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="display: flex">
  <table>
    <tbody>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td>
          <h3>5th Input</h3><input type="text">
        </td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><input type="text"></td>
      </tr>
    </tbody>
  </table>

  <div class="another-input-wrapper">
    <h2 style="margin-top:100px">Another input</h2>
    <input id="another-input" type="text">
  </div>
</div>