Having issue in reading Input value from Table

Question

Actually I am trying to read the input field value from HTML Table using querySelector in loop but i don't know why it is showing me error "TypeError: Cannot read property 'value' of null".

I also tried it with this :- oCells.item(j).getElementsByTagName('input')[0].value Same Result:- "TypeError: Cannot read property 'value' of null"

Please help me getting what I am doing wrong here,

Thanks

Here is the code:

<!DOCTYPE html>

<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>

<body>

<table id="m-table">
   <caption>Item Lists</caption>
  <thead class="text-center">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Item Code</th>
      <th scope="col">Item Description</th>
      <th scope="col">Rate</th>
      <th scope="col">Order Qty</th>
      <th scope="col">Order Amount</th>
      <th scope="col">Rate of Rec. Qty</th>
      <th scope="col">Quantity Received</th>
    </tr>
  </thead>
  <tbody id = "PO_results">
     <tr class = "aach-Result">
      <th class = "rowInd" scope="row">1</th>
      <td class = "IC">2</td>
      <td class = "ID">3</td>
      <td class = "IR">4</td>
      <td class = "OQ">5</td>
      <td class = "OAM">6</td>
      <td>
      <div >
      <input id = "1" type="number"   aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
      <td>
      <div >
      <span id="inputGroup-sizing-sm"></span>
      <input id = "2" type="number"  aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
    </tr>
     <tr class = "aach-Result">
      <th class = "rowInd" scope="row">2</th>
      <td class = "IC">3</td>
      <td class = "ID">4</td>
      <td class = "IR">5</td>
      <td class = "OQ">6</td>
      <td class = "OAM">7</td>
      <td>
      <div >
      <input id = "1" type="number"   aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
      <td>
      <div >
      <span id="inputGroup-sizing-sm"></span>
      <input id = "2" type="number"  aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
  <tr>
      <th id="LinesTableGRN" colspan="7">Total Amount</th>
      <td> <input id = "TotalTableGRN" type="number"  min="1" disabled></td>
  </tr>
</table>

<input type="submit" value="Submit" onclick = "ProcessGETable()">


   <script>
   function ProcessGETable()
   {
    var Tdata = [];
 
    var oTable = document.getElementById('m-table');
    var rowLength = oTable.rows.length;
    for (i = 1; i < rowLength; i++)
    {
    var row = [];         
       var oCells = oTable.rows.item(i).cells;        
       var cellLength = oCells.length;
      
       for(var j = 1; j < cellLength-1; j++)
       {
              if(j < 5)
              {
              var cellVal = oCells.item(j).innerHTML;
              row.push(cellVal);
              }
              else
              {
              var test =  oCells.item(j).querySelector('input');
              console.log(test.value)
              }
        }
         Tdata.push(row)
    }
  console.log(Tdata)
   }
    </script>
  </body>

Sai Vamsi · Accepted Answer · 2021-05-01 13:49:40Z

Above error is happening cause the last column while running the for loop is referring to 'Order Amount' column which doesn't contain input element. Hence this line oCells.item(j).querySelector('input') will be null. To get the 'Rate of Rec. Qty' change if(j < 5) to if(j < 6).

If you want to get both 'Rate of Rec. Qty' and 'Quantity Received' then also change for(var j = 1; j < cellLength-1; j++) to for(var j = 1; j < cellLength; j++).

This change should eliminate the error you are facing and will return the values. Please verify..

<!DOCTYPE html>

<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>

<body>

<table id="m-table">
   <caption>Item Lists</caption>
  <thead class="text-center">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Item Code</th>
      <th scope="col">Item Description</th>
      <th scope="col">Rate</th>
      <th scope="col">Order Qty</th>
      <th scope="col">Order Amount</th>
      <th scope="col">Rate of Rec. Qty</th>
      <th scope="col">Quantity Received</th>
    </tr>
  </thead>
  <tbody id = "PO_results">
     <tr class = "aach-Result">
      <th class = "rowInd" scope="row">1</th>
      <td class = "IC">2</td>
      <td class = "ID">3</td>
      <td class = "IR">4</td>
      <td class = "OQ">5</td>
      <td class = "OAM">6</td>
      <td>
      <div >
      <input id = "1" type="number"   aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
      <td>
      <div >
      <span id="inputGroup-sizing-sm"></span>
      <input id = "2" type="number"  aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
    </tr>
     <tr class = "aach-Result">
      <th class = "rowInd" scope="row">2</th>
      <td class = "IC">3</td>
      <td class = "ID">4</td>
      <td class = "IR">5</td>
      <td class = "OQ">6</td>
      <td class = "OAM">7</td>
      <td>
      <div >
      <input id = "1" type="number"   aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
      <td>
      <div >
      <span id="inputGroup-sizing-sm"></span>
      <input id = "2" type="number"  aria-describedby="inputGroup-sizing-sm"  min="1" required>
      </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
  <tr>
      <th id="LinesTableGRN" colspan="7">Total Amount</th>
      <td> <input id = "TotalTableGRN" type="number"  min="1" disabled></td>
  </tr>
</table>

<input type="submit" value="Submit" onclick = "ProcessGETable()">


   <script>
   function ProcessGETable()
   {
    var Tdata = [];
 
    var oTable = document.getElementById('m-table');
    var rowLength = oTable.rows.length;
    for (i = 1; i < rowLength; i++)
    {
    var row = [];         
       var oCells = oTable.rows.item(i).cells;        
       var cellLength = oCells.length;
      
       for(var j = 1; j < cellLength; j++)
       {
              if(j < 6)
              {
              var cellVal = oCells.item(j).innerHTML;
              row.push(cellVal);
              }
              else
              {
              var test =  oCells.item(j).querySelector('input');
              console.log(test.value)
              }
        }
         Tdata.push(row)
    }
  console.log(Tdata)
   }
    </script>
  </body>

Thanks, it worked. that was a silly mistake from my side:P. Thanks again for correcting it.

Collectives™ on Stack Overflow

Having issue in reading Input value from Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related