jQuery get value from hidden input in column

Question

I have got the following HTML table...

<table>
  <thead>
    <tr>
      <th>Nr.</th>
      <th>Name</th>
      <th>Info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Laura</td>
      <td><input type="hidden" value="1"><a href="#" class="info">Info</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Sabrina</td>
      <td><input type="hidden" value="2"><a href="#" class="info">Info</a></td>
    </tr>
  </tbody>
</table>

How can I get with jQuery the value of the hidden input field, when the link is clicked?

$(".info").click(function() {
  // Here I need to find out the value...
});

jsfiddle.net/5DEa9

PiLHA
– PiLHA

2013-07-29 18:54:36 +00:00
Commented Jul 29, 2013 at 18:54 — PiLHA
– PiLHA, Commented Jul 29, 2013 at 18:54

krishwader · Accepted Answer · 2013-07-29 19:51:15Z

3

Here's how you do it :

$(".info").click(function(e) {
  //just in case, will be useful if your href is anything other than #
  e.preventDefault();
  alert($(this).prev('input[type="hidden"]').val());
});

prev method will search for the previous element, which is where your input[hidden] is.

And its href, not hre, in the <a/> tags.

edited Jul 29, 2013 at 19:51

answered Jul 29, 2013 at 18:47

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

gen_Eric Over a year ago

Don't forget to return false; or e.preventDefault();.

krishwader Over a year ago

Hmm..just added that..didnt bother because the href was pointing to #

gen_Eric Over a year ago

@FrédéricHamidi: An href of # doesn't magically stop the default action. # is used to jump around to different anchors in the page. # will jump to the top of the page and add # to the URL, unless you stop the default action.

gen_Eric Over a year ago

@hungerpain: Read my previous comment. # doesn't magically stop the default action.

gen_Eric Over a year ago

@FrédéricHamidi: I only knew that because I recently forgot about this and wondered why my page kept jumping to the top.

|

David · Accepted Answer · 2013-07-29 18:50:35Z

2

You can also use attributes <a href="#" data-hidden="1" class="info"> don't need use hidden fields

$(".info").click(function(e) {
  e.preventDefault();
  alert($(this).data('hidden')); // or $(this).attr('data-hidden');
});

answered Jul 29, 2013 at 18:50

David

1,87920 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery get value from hidden input in column

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related