How can I get the value of employee from td input using JavaScript or Jquery?

Question

I want to get the value of the input field using js or jquery of the following tr of a table-

<tr>
   <td class="center"> <div class="hide"> <?php echo $row['id']; ?> </div> </td>
   <td class="center"> <div class="hide"> <?php echo $row['employee_no']; ?> </div> 
       <input type="tel" name="employee_no" id="employee_no" value="<?php echo 
       $row['employee_no']; ?>" onchange="return validate()" > </td>
</tr>

I try this code-

function update(thisrow){
   var Row = document.getElementById(thisrow);
   var Cells = crw.getElementsByTagName("td");
   var id = Cells[0].innerText; 
   var employee = Cells[1].innerText;}

Unfortunately, it gives the correct value of id but gives blank value of the employee? How can I get the value of employee from td input using JS or Jquery?

`crw.getElementsByTagName("td")` what is `crw` and where does it come from? — mhodges, Dec 20 '22 at 19:14
How do you trigger the function? Through a button or so? If you can say clearly what are you trying to do, we could help you better. — Baris Taskiran, Dec 20 '22 at 19:24
@sheetalsingh not sure if it is the case, just a side note to your markup and the answer which should work. If your table includes more rows with same markup you would get invalid HTML as an id `id="employee_no"` has to be unique — Uwe, Dec 20 '22 at 19:31
@Uwe Yes, you are right. Due to hundreds of rows, assigning id is not possible. — sheetal singh, Dec 20 '22 at 19:35
You are already finding elements by `getElementsByTagName` so maybe try `var employee = Cells[1].getElementsByTagName('input')[0].value; ` — Uwe, Dec 20 '22 at 19:44
And to answer your question. Your Input does not have an `innerHTML` but the `value` attribute. — Uwe, Dec 20 '22 at 19:48
Flagged your question as a duplicate - you can find useful explanations and tipps at this SO question [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Uwe, Dec 20 '22 at 19:50
[Your code works fine](https://jsfiddle.net/dont_panic/hwe6v7ky/) - though you have made it very hard for anyone to help and verify that. Your HTML includes PHP which is totally irrelevant here, anyone trying to help just has to replace it. Your JS uses `getElementById` to identify the row, but the HTML row has no ID. You haven't shown how you fire the function we are trying to debug for you (`update`). You show us how you fire another function (`validate`) which is not shown and appears to be irrelevant to this problem. Your JS includes a typo. — Don't Panic, Dec 20 '22 at 22:25
Your question asks how to retrieve the value from the input, but the code does something completely different (retrieves text from HTML, not the input value). You will make it easier for others to help, and get better help, faster, if you take some care with your question. Please read https://stackoverflow.com/help/mcve FWIW there is a better way to get table row/cell content, maybe useful: https://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript — Don't Panic, Dec 20 '22 at 22:28
@Uwe Thanks. It works. I was not aware that getElementsByTagName can be used twice. — sheetal singh, Dec 21 '22 at 03:04
@sheetalsingh nice to hear. FYI: You can use `getElementsByTagName` as often as you want - like a waterfall - as long you call it on an HTML Element. — Uwe, Dec 21 '22 at 12:53

DCR · Answer 1 · 2022-12-20T21:25:47.000

0

just grab the element and get the value.

function validate() {

  let t = document.getElementsByTagName("table")[0]
  let trs = t.getElementsByTagName("tr")

  for (i = 0; i < trs.length; i++) {
    let tds = trs[i].getElementsByTagName("td")
    for (j = 0; j < tds.length; j++) {
      let inp = tds[j].getElementsByTagName("input")
      if (inp.length > 0) console.log(inp[0].value)
    }
  }
}

<table>
  <tr>
    <td class="center">
      <div class="hide">
        <?php echo $row['id']; ?> </div>
    </td>
    <td class="center">
      <div class="hide">
        <?php echo $row['employee_no']; ?> </div>
      <input type="tel" name="employee_no" id="employee_no" value="000-123-1234" onchange="validate()"> </td>
  </tr>
</table>

edited Dec 20 '22 at 21:25

answered Dec 20 '22 at 19:26

DCR

14,737
12
52
115

Providing an id is not so easy as there are hundreds of rows like this fetched from through php mysql. Is there another way to reach to td input except the id? – sheetal singh Dec 20 '22 at 19:32
I've updated the snippet. This shows a general approach without using id. someone else may have a better way but this should work – DCR Dec 20 '22 at 21:26

How can I get the value of employee from td input using JavaScript or Jquery?

1 Answers1