Cannot get value of a first TD in current row

Question

My requirement is to have 3 check-boxes in each table row, and once the checkbox is checked, it will create a hidden input with the value corresponding to the first <td> of THAT particular row.

Here is a sample row:

<tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput()"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name=">2 years and <=3 years[]" onclick="createUserNameInput()"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="> 3 years[]" onclick="createUserNameInput()"></td>
</tr>

Once any of the 3 check-boxes are checked, this hidden input should be created. If 3 are checked, 3 inputs should be created. <value> of these inputs should equal the value of first <td> in THIS row, which is user1. Here is how I am trying to implement it (code is inconsistent but I just need to get it working first):

<script>
    function createUserNameInput() {
        // var input = document.createElement("input");
        // input.setAttribute("type", "hidden");
        // input.setAttribute("name", "user");
        // input.setAttribute("value", $(this).parent().siblings(":first").text()); // VALUE IS EMPTY
        // document.getElementById("main-form").appendChild(input);

        alert($(this).parent().siblings(":first").text()); // VALUE IS EMPTY
    }
</script>

I have referenced these previous posts but none of those solutions work for me. When I run alert(), value is empty - nothing is displayed:

Who can help? If it can be done without jQuery, even more amazing!

Wait isn't the parent of the input field your `td` tag? So don't you need two `parent()` methods? — Dominik, Sep 13 '18 at 06:18
@Dominik `alert($(this).parent().siblings("td:first").text());` did not work either. `parent()` is the `` around my checkbox I believe — tera_789, Sep 13 '18 at 06:23
ok so can you try `$(this).parent().parent().siblings("td:first").text();` — Dominik, Sep 13 '18 at 06:25

Mamun · Answer 1 · 2018-09-13T06:58:35.690

4

The issue is, you are not passing this into the function. Pass this from the function call in the element so that you can refer that inside the function body.

function createUserNameInput(el) {
  var input = document.createElement("input");
  input.setAttribute("type", "hidden");
  
  input.setAttribute("name", "user");
  input.setAttribute("value", $(el).parent().siblings(":first").text()); // VALUE IS EMPTY
  document.getElementById("main-form").appendChild(input);

  alert($(el).parent().siblings("td:first").text()); // VALUE IS EMPTY
  console.log('Hidden field value:',$('#main-form input[name=user]').val())
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-form"></div>
<table>
  <tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput(this)"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name=">2 years and <=3 years[]" onclick="createUserNameInput(this)"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="> 3 years[]" onclick="createUserNameInput(this)"></td>
  </tr>
</table>

edited Sep 13 '18 at 06:58

answered Sep 13 '18 at 06:29

Mamun

66,969
9
47
59

I accepted Chaska's answer simply because he answered first and he has lower rating as well. Your solution works as good as his. Thank you – tera_789 Sep 13 '18 at 06:36
How can I make _logical_ connection now between that checkbox and hidden input that I created? Actually, connection between hidden input's `value`, which is that first `` and the `name` of a checkbox? What would you suggest? – tera_789 Sep 13 '18 at 06:43
@tera_789, the hidden input should be created in the `main-form` with the value. There should not be any problem. – Mamun Sep 13 '18 at 06:50
Oh yeah it is. What I meant is this: there are **3** check-boxes for **each** user = 1 hidden input's `value` (username) should correspond to one of the checkbox's `name`. If I have 50 check-boxes checked, how do I connect them correctly among each other? – tera_789 Sep 13 '18 at 06:58
@tera_789, though the issue is not quite clear, you can set the name of checkbox as well with the `td` text. – Mamun Sep 13 '18 at 07:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179957/discussion-between-tera-789-and-mamun). – tera_789 Sep 13 '18 at 07:20

score 2 · Accepted Answer · edited Sep 13 '18 at 07:18

You have to pass the object to the function you are calling:

onclick="createUserNameInput(this)"
Convert the DOM object to jQuery object you retrieve.

createUserNameInput(e) and $(e).parent()...

function createUserNameInput(e) {
  // var input = document.createElement("input");
  // input.setAttribute("type", "hidden");
  // input.setAttribute("name", "user");
  // input.setAttribute("value", $(this).parent().siblings(":first").text()); // VALUE IS EMPTY
  // document.getElementById("main-form").appendChild(input);

  alert($(e).parent().siblings(":first").text()); // VALUE IS NOT EMPTY NOW!
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput(this)"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name=">2 years and <=3 years[]" onclick="createUserNameInput(this)"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="> 3 years[]" onclick="createUserNameInput(this)"></td>
  </tr>
</table>

Thanks it worked! I marked yours as an accepted answer since you have lower rating and answered first before Mamun did. — tera_789, Sep 13 '18 at 06:35

score 1 · Answer 3 · answered Sep 13 '18 at 06:32

You can bind the click event on the checkbox elements like,

$(function(){
  $('.users').on('click',':checkbox',function(){
        // var input = document.createElement("input");
        // input.setAttribute("type", "hidden");
        // input.setAttribute("name", "user");
        // input.setAttribute("value", $(this).parent().siblings(":first").text()); // VALUE IS EMPTY
        // document.getElementById("main-form").appendChild(input);

        var tr = $(this).closest('tr')
console.log(tr.children("td:first").text(),'total checked = '+ tr.find(':checkbox:checked').length); // VALUE IS EMPTY
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="users">
<tr>
    <td>user1</td>
    <td>768.51</td>
    <td>4,680</td>
    <td>0</td>
    <td>0%</td>
    <td>0</td>
    <td><input type="checkbox" name="1"></td>
    <td>0.00</td>
    <td>0.00%</td>
    <td>1</td>
    <td><input type="checkbox" name="2"></td>
    <td>768.51</td>
    <td>100.00%</td>
    <td>4,677</td>
    <td><input type="checkbox" name="3"></td>
</tr>
</table>

score 0 · Answer 4 · answered Sep 13 '18 at 06:25

Can you just pass to the function like this:

<td><input type="checkbox" name=">1 year and <=2 years[]" onclick="createUserNameInput('user1')"></td>

And get like this:

<script>
    function createUserNameInput(value) {
        console.log(value);
    }
</script>

score 0 · Answer 5 · edited Sep 13 '18 at 06:26

0

$(this).closest('tr').find("td:first").text();

edited Sep 13 '18 at 06:26

Rohan Kumar

40,431
11
76
106

answered Sep 13 '18 at 06:26

Leonardo Gasparini

201
3
9

score 0 · Answer 6 · answered Sep 13 '18 at 06:38

0

You can also try this way, getting the parent node until the table and get the first child element

$(e).parentsUntil('table').find('td:first').text()

answered Sep 13 '18 at 06:38

mk358

54
4

Cannot get value of a first TD in current row

6 Answers6

Can you just pass to the function like this: