How to get value of input tag that changes?

Question

Basically, I wrote this function in JavaScript:

<script>
  function getVal(value) {
    console.log(value);
  }
</script>

And this is my HTML input tag:

<input onchange="getVal(this.value)" type="text" id="unit" />

I am expecting to get value of this element printed in console (which I don't). I am not manually typing in value of element but rather setting it with this piece of code:

<script>
  var table = document.getElementById('table');
                
  for(var i = 1; i < table.rows.length; i++) {
    table.rows[i].onclick = function()
      {
        //rIndex = this.rowIndex;
        document.getElementById("unit").value = this.cells[0].innerHTML;
      };
  }
</script>

Does this answer your question? [Trigger Change event when the Input value changed programmatically?](https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically) — pilchard, Apr 22 '22 at 00:22
that event occurs when the element loses focus or when it gets fired on purpose. You should fire it using `yourelement.dispatchEvent(new Event('change'))` — Diego D, Apr 22 '22 at 00:22
what is your console log error print out ? , You can provide more details of your question ,Other wise you may read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Adan, Apr 22 '22 at 00:23
@DiegoDeVita Can you provide me with some example code, pls. Using dispatchEvent seems a bit confusing. Thanks. — helloworld, Apr 22 '22 at 00:25
@Adan I am not getting anything as I wrote it already. There's no error as well as there's no input's value in my console. — helloworld, Apr 22 '22 at 00:25
@pilchard Doesn't really help me because solution is in jQuery? — helloworld, Apr 22 '22 at 00:34
The answer with the most votes in the duplicate is vanilla. Take the time to read all the answers, and the comments. — pilchard, Apr 22 '22 at 07:11

score 1 · Accepted Answer · answered Apr 22 '22 at 00:36

1

I just changed the index starting from 0 instead of 1 when looping through the table rows and added the dispatchEvent call to fire the event on the input text so that its handler will run.

Please let me know if there's something I didn't get correctly in your question.

function getVal(value) {
  console.log(value);
}

let table = document.getElementById('table');

for(var i = 0; i < table.rows.length; i++)
{
  table.rows[i].onclick = function()
  {
    let unit = document.getElementById("unit");
    unit.value = this.cells[0].innerHTML;
    unit.dispatchEvent(new Event('change'));     
  };
}

table#table{
  width: 100%;
}

table#table tr:hover{
  background: lightgray;
  cursor: pointer;
}

table#table tr td{
  border: solid 1px black;
}

<input onchange="getVal(this.value)" type="text" id="unit" />

<table id="table">
  <tr>
    <td>Row1</td>
  </tr>
  <tr>
    <td>Row2</td>
  </tr>
  <tr>
    <td>Row3</td>
  </tr>
</table>

answered Apr 22 '22 at 00:36

Diego D

6,156
2
17
30

It's not problem in setting input's value. That's okay. The problem is getting input's value after its set. – helloworld Apr 22 '22 at 00:40
I dont understand your point. When you click the row of the table, the click event is fired and its handler will be executed. Such handler will correctly fetch the text inside the row and use that value to populate the input text. After that it fires the change event on the input text so that also that handler will run and will output that value on console. – Diego D Apr 22 '22 at 00:43
Absoloutely my bad, haven't noticed `unit.value = this.cells[0].innerHTML; unit.dispatchEvent(new Event('change')); ` . Your solution works perfectly. Thanks! – helloworld Apr 22 '22 at 00:48
1

if you run that snippet you will clearly see in the bottom of its canvas, a stack of messages piling up while you keep clicking on table rows. That's the `getVal()` running that it's calling `console.log` correctly fetching the input value (through `this`). I'm glad it met your expectations in the end. – Diego D Apr 22 '22 at 00:48

How to get value of input tag that changes?

1 Answers1