Select hidden input inside a td

Question

I'm trying to select value from a hidden input inside a td and using this jQuery, but it hasn't worked:

 $('.job-detail').click(() => {
   alert($(this).find('input[name=id]').val());
 });

<tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />1</td>
    <td><input class="name" type="hidden"
        value="..." ></td>
    <td>every day 1:00</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr>
<tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />2</td>
    <td>...</td>
    <td>every day 1 hour</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr>

Can anyone help me please :D Btw, I can not understand clearly 'this' of jQuery until now :(

Duplicate of https://stackoverflow.com/questions/49478312/jquery-detect-td-id-on-click/49478670#49478670 — GSSwain, Mar 26 '18 at 11:16

Satpal · Accepted Answer · 2018-03-26T11:15:31.023

2

Stick to normal function expression instead of Arrow function, when you want to use this as it does not have its own this and it lexically bind their context so this actually refers to the originating context (scope in which the function was declared)

 $('.job-detail').click(function(){
   alert($(this).find('input[name=id]').val());
 });

edited Mar 26 '18 at 11:15

answered Mar 26 '18 at 11:12

Satpal

126,885
12
146
163

Thank you very much, it worked. But why we shouldn't use arrow function? – Nguyen Hoang Vu Mar 26 '18 at 11:14
Nguyen, when you use arrow functions, `this` refers to the scope where the function was declared, not the scope of the arrow function itself. – Phiter Mar 26 '18 at 11:14
Ah, I got it. Thanks for your supporting – Nguyen Hoang Vu Mar 27 '18 at 04:36

score 2 · Answer 2 · answered Mar 26 '18 at 11:18

2

You can use arrow function but you can't use this keyword inside it, Below is the code which uses arrow function

 $('.job-detail').click((e) => {
   alert($(e.currentTarget).find("input[name=id]").val());
 });

answered Mar 26 '18 at 11:18

nerding_it

608
5
14

score 0 · Answer 3 · answered Mar 26 '18 at 11:18

0

The probelm is your arrow function. Either replace it with a 'normal' function or use the arguments of the click function.

To read more about the different types of functions have a look at this question

answered Mar 26 '18 at 11:18

NielsNet

738
7
11

score 0 · Answer 4 · answered Mar 26 '18 at 11:21

Your HTML is not valid you should add tr into a table tag, Also run your JS inside $(document).ready to make sure DOM object is loaded.

And for this it will refer to curent tr you click.

$(document).ready(function() {
  $('.job-detail').on('click', function() {
    alert($(this).find('input[type=hidden]').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="job-detail">
    <td><input name="id" type="hidden" value="111" />1</td>
    <td><input class="name" type="hidden" value="..."></td>
    <td>every day 1:00</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
  </tr>
  <tr class="job-detail">
    <td><input name="id" type="hidden" value="222" />2</td>
    <td>...</td>
    <td>every da 1 hour</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
  </tr>
</table>

score 0 · Answer 5 · answered Mar 26 '18 at 11:24

The .closest and .find selectors are complements of each other and used together are the best way to get to the corresponding element of where the click (or any event) occurred link.

$('.job-detail').click((e) => {
   alert($(event.target).closest('tr.job-detail').find('input[type=hidden]').val());
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />1</td>
    <td><input class="name" type="hidden"
        value="..." ></td>
    <td>every day 1:00</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr>
<tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />2</td>
    <td>...</td>
    <td>every day 1 hour</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr></table>

Select hidden input inside a td

5 Answers5