Get the value of a column entered by the user

Question

 <form id="form1" runat="server">

  <table border="1" id="ResultSheet">
      <tr  id ="Name">
          <td> Student Name</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td>Subject Name</td>
      </tr>
      <tr>
          <td>Maths</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td>Science</td>
          <td><input type ="text" /></td>
      </tr>
      <tr>
          <td>English</td>
          <td><input type ="text" /></td>
      </tr>
   </table>
 </form>

I have this table and now I want to get the value of each of input type. how do I get it.

I've tried:

document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);

But it did not return anything.

Answer 1

You could use querySelectorAll() like :

document.querySelectorAll('#ResultSheet input');

The loop through the result like the snippet below shown.

Hope this helps.

var inputs = document.querySelectorAll('#ResultSheet input');

for(var i=0;i<inputs.length;i++){
   console.log(inputs[i].value);
}

<form id="form1" runat="server">
  <table border="1" id="ResultSheet">
      <tr  id ="Name">
          <td> Student Name</td>
          <td><input type="text" value="1"/></td>
      </tr>
      <tr>
          <td>Subject Name</td>
      </tr>
      <tr>
          <td>Maths</td>
          <td><input type="text"  value="2"/></td>
      </tr>
      <tr>
          <td>Science</td>
          <td><input type ="text"  value="3"/></td>
      </tr>
      <tr>
          <td>English</td>
          <td><input type ="text"  value="4"/></td>
      </tr>
   </table>
 </form>

Answer 2

Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

Example: https://jsfiddle.net/8co9v0ye/