How to get all data (include textbox) from a table?

Question

I want to cache a dynamic table that contains several textboxs which user can input some value in it. The point is: the cached data should contain what user is inputting.

I can achieve this by trying to get table rows and getElementById for each textbox one by one to extract value inside it.

But I feel this is a hard way and kinda stupid.

then I am trying to get data by getting table object and it's innerHTML. It almost works, but the problem is : the textbox value is the default value not what user is typing.

for example:

<table>
  <tr>
    <td>
      <input type="textbox" value="defaultValue">
    </td>
  <tr>
  <tr>
    <td>
      <input type="textbox" value="defaultValue">
    </td>
  </tr>
  <tr>
    <td>
      some info 
    </td>
  </tr>
  <tr>
    <td>
       <input type="textbox" value="defaultValue">
    </td>
  </tr>
</table>

and user typing 111 in the first textbox 222 in the sec 333 in the third

My smart plan I thought(innerHTML) only get defaultValue which disappoint me.

anyone has clue for this? or any better solution to get the whole data?

Answer 1

You could use jquery's for each function to traverse each input field and do what you like with them. You can use jquery selectors to get the inner html, or value, or whatever you like, and store it in an array. For example:

jquery

function formHandler(){

$('input').each(function() {
  //do stuff here for each input, increment an array, store data at that index, etc...
  var innerHTML = $(this).html(),
      value = $(this).val();
}

}//end formHandler funciton

Then simply call that function when needed, or run it when the page loads...