How to get this HTML Table textarea's value using JS?

August 16, 2022

I’ve tried some suggestions, but no success so far.

I’m getting null when trying to get this textarea value while going through the table and I don’t know exactly why:

function savePo(user, origin) {
  user = 'user';
  origin = 'Trim';


  let date = new Date();
  options = {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false,
    timeZone: 'CST'
  };

  let timeStamp = new Intl.DateTimeFormat('en-US', options).format(date).toString();
  timeStamp = timeStamp.replace(",", "");

  const tableRows = document.querySelectorAll("#tableRows tr");

  let tableData = [];
  if (origin == 'Trim') {
    tableData = [...tableRows].map(r => {
      let td = r.querySelectorAll("td");
      return [...td].map((c, j) =>
        j == 2 ? c.value : //THIS IS THE LINE WHICH IS NOT WORKING PROPERLY
        j == 7 ? c.querySelectorAll('input[type="checkbox"]')[0].checked :
        j == 6 ? c.innerText :
        c.querySelector('input').value)
    });
    console.log('Table Data: ' + tableData)
  }
}

Here is the Fiddle in case you feel like pointing where the flaw is.

Appreciate it!

>Solution :

To get the value of a textarea element, instead of innerText of the parent element use value of such textarea element.

const text = document.querySelector('td textarea').value
console.log(text)

<table>
  <tr>
    <td>
    <textarea name="articuloField" id="articulo" rows="2" cols="65" wrap="soft">Testing the textarea value field which never seems to work!!!!!!!!!!</textarea>
    </td>
  </tr>
</table>