Retrieving values from input elements in a table in HTML

Question

I have a table set up as such:

<table id="mantab" style="cursor:pointer;" onkeypress="scan(event)">
<tr>
  <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a>
  <td><input type='text' placeholder="Term" id='inp1' class="inp1" /></td>
  <td><input type='text' placeholder="Definition" id='inp2' class="inp2" /></td>
</tr>
</table>

An action can be taken to add a row to this table, which is done by inserting a cell via the insertCell method and setting that cell's innerHTML appropriately.

What I've been trying to do is iterate through the first column of the table and add up all the values from inputs in each cell (after they've been entered) in a comma separated string. This process should be repeated for the second column.

The problem:

Everything I attempt to read is undefined

I've tried the following approaches to retrieving the contents of a cell:

document.getElementById("id").value,

document.getElementByClassName("classname").value,

table.rows[0].cells[0].value,

table.rows[0].cells[0].val(),

table.rows[0].cells[0].innerHTML,

table.rows[0].cells[0].children[0].val()

None work, some return blank, most undefined. The innerHTML one returns the input element inside the cell, but there is no actual text input data.

If a clearer picture of what I'm looking at is needed, see the following:

This should return one variable containing a string: "KeyA,KeyB,KeyC" and another with: "ValueA,ValueB,ValueC"

I'm somewhat new to javascript, but I have a basic knowledge of a couple other languages. I'm not sure why iterating through a table is posing such a challenge. Any help clarifying how I can extract these "invisible" values would be appreciated. Thanks.

Here is one of many approaches that isn't working for me:

for (var i = 0, row; row = table.rows[i]; i++) {
   for (var j = 0, col; col = row.cells[j]; j++) {
       if(j == 0) { //if first column
            words += col.getElementsByClassName("inp1").value + ","; //inp1 refers to first column input class name
       } else {
            defs += col.getElementsByClassName("inp2").value + ","; //inp2 refers to second column input class name
      }
   }
}

In this example, words is analagous to the first variable from the image above, and defs to the second.

Update: logging the values and the element responsible for providing the values resulted in this:

The first log is blank, and the second has no value assigned, even though I typed in something.

I'm assuming your values are numbers, then u can try `parseFloat(col.getElementsByClassName("inp1").value)` — DannyBoi, Aug 28 '16 at 07:55
in case this is not number you can simply call value on input — Zeeshan, Aug 28 '16 at 07:57
here is [a JsFiddle](https://jsfiddle.net/tz1hwnr0/) that works. you must have some kind of other problem in your page. — avrahamcool, Aug 28 '16 at 08:02
`getElementsByClassName` returns an array of objects. so you have to iterate over them and then call `value` for each one. — avrahamcool, Aug 28 '16 at 08:04
The values are strings. I will give the page another look, but for the most part the concept of the input in each cell seems straightforward. — Sid G., Aug 28 '16 at 08:08
thanks for the correction, I did need to iterate over the array. However, I still end up getting blank values. Would the fact that I'm subsequently writing these to a database change anything? — Sid G., Aug 28 '16 at 08:10
https://jsfiddle.net/1uquw1tg/ the add row is not working here but that is less important i think — Sid G., Aug 28 '16 at 08:46

Zeeshan · Accepted Answer · 2016-08-28T09:10:35.533

1

You can do something like this using jQuery selectors

$("#bt").click(function()
{
  var keys = [], values = [];

  $('table tr input').each(function(i,e){
  //access the input's value like this:
    var $e = $(e);
    if($e.hasClass('key')){
     keys.push($e.val());
    }else{
    values.push($e.val());
    }
});  
  keys = keys.join(',');
  values = values.join(',');
  console.log(keys);
  console.log(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mantab" style="cursor:pointer;">
<tr>
  <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a>
  <td><input type='text' placeholder="Term" id='inp1' class="key" /></td>
  <td><input type='text' placeholder="Definition" id='inp2' class="value" /></td>
</tr>
<tr>
  <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a>
  <td><input type='text' placeholder="Term" id='inp1' class="key" /></td>
  <td><input type='text' placeholder="Definition" id='inp2' class="value" /></td>
</tr>
</table>

<button id="bt">
Get Value
</button>

edited Aug 28 '16 at 09:10

answered Aug 28 '16 at 07:55

Zeeshan

619
4
16

While the structure of this is definitely what I'm looking for, .val() returns blank output even though there is text written in. Perhaps you can recommend a different method of accessing the input values/tell me how to make the value variable actually update to reflect the cell contents? – Sid G. Aug 28 '16 at 08:04
1

just run the snippet it's outputing valid values. There must be something wrong on your page. – Zeeshan Aug 28 '16 at 08:15
My apologies, this is functioning correctly here. I went ahead and integrated your solution into my page without running the code snippet. Thanks for a working response. – Sid G. Aug 28 '16 at 08:19
I fixed my use of your solution, but it fails to retrieve any value past the first row. Do you have any explanation for this? – Sid G. Aug 28 '16 at 08:31
This is due to selector $('table tr input:first') and $('table tr input:last'). – Zeeshan Aug 28 '16 at 09:00
Huge thanks for following up with this. You've resolved the problem. I need to learn how to use jQuery better.... – Sid G. Aug 28 '16 at 17:57
Sure will love to help. Just PM me in case you need help – Zeeshan Aug 28 '16 at 19:54

score 0 · Answer 2 · answered Aug 28 '16 at 07:38

0

what about using jQuery and finding all inputs in a table:

$('table input').each(function(i,e){
  //access the input's value like this:
  console.log($(e).val());
});

answered Aug 28 '16 at 07:38

Yair Nevet

12,725
14
66
108

I just tried it. The result is a blank console log output (6 times). – Sid G. Aug 28 '16 at 07:41
there are values in your inputs? – Yair Nevet Aug 28 '16 at 07:42
Yes, just double checked. Logging the input elements themselves turns up something like this: <... value>. There's no '=' operator or a value. – Sid G. Aug 28 '16 at 07:43
should be something like: – Yair Nevet Aug 28 '16 at 07:45
any idea why value doesnt have any assignment? – Sid G. Aug 28 '16 at 07:46

Retrieving values from input elements in a table in HTML

2 Answers2