31

I have the following HTML generated by an ASP.NET repeater:

<table>
  <tr>
    <td><input type="hidden" name="ItemId" id="ItemId" value="3" /></td>
    <td>Terry</td>
    <td>Deleted</td>
    <td>Low</td>
    <td>Jun 21</td> 
  </tr>
  <!-- rows repeat -->
</table>

How do I select a particular hidden field by value, so that I can then manipulate the columns next to it?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
flesh
  • 23,725
  • 24
  • 80
  • 97
  • 2
    Why don't you make life easier for yourself and get the field by ID? – RichardOD Jun 30 '09 at 20:55
  • if you don't get it by id then someone could come along, add an input to your page and if they both have the same value then you may get an error; doing it by id seems much safer – jcollum Jun 30 '09 at 20:58
  • @Richard - Inside an ASP.NET Repeater every hidden field will get a different ID (as it should), e.g. ctl100_ItemId, ctl101_ItemId, etc. Usually we target these IDs with $('id$=ItemId') (ends with), but this will not work well here. – Kobi Jul 01 '09 at 05:17
  • @Flesh- I appreciate the added complexity of nested controls in ASP.NET, however you can still obtain the client IDs of them (it is just not immediately obvious how to do this). Look at the ItemDataBound event, e.Item.FindControl and ClientID. This will do exactly what you need the right way, without having to resort to a hack, that as jcollum has pointed out may lead to an error. – RichardOD Jul 01 '09 at 07:55
  • yeah i understand that, im not hacking, i need to do it client side because im saving changes via a web method rather than postback (the postback is saving other items on the page) and need to reflect that in the UI for the users benefit. thanks for the suggestion though – flesh Jul 01 '09 at 19:54

3 Answers3

83

Using jQuery Selectors, you can target your element by a certain attribute matching the desired value:

$('input[value="Whatever"]');

This way you are targeting an input element, by the attribute value that is equal to the desired value.

EDIT 5/14/2013: According to an answer below, this no longer works as of jQuery 1.9.

Michael Bray
  • 14,998
  • 7
  • 42
  • 68
  • 4
    Just wanted to mention, but there can be cross-browser compatibility issues when using quotes around the value you are querying. $('input[value=Whatever]') seems to be the accepted way to do these sort of queries. – Wally Lawless Aug 20 '10 at 18:05
  • 2
    As pointed out by Glyn Jones, this doesn't work with jQuery 1.9+. See his answer below for the alternative. – Luca Fagioli May 08 '13 at 15:35
  • Technically, if you want to match by the `value` *attribute*, then this answer is still the right one. Of course, because jQuery loves butchering the selectors spec for its own needs, attribute selectors didn't always work that way. In 1.9+ they now work according to spec, meaning this will *only* match it by the `value` attribute declared in the markup, and *not* by `.value` DOM property. – BoltClock Sep 06 '13 at 16:59
11

Note: Since jQuery 1.9 the input[value="banana"] selector is no longer valid, because 'value' of the input is technically not an attribute. You need to use the (far more difficult to read) .filter

E.g.

$("input").filter(function () {
    return this.value === "banana";
});

See also: jQuery 1.9.1 property selector

Community
  • 1
  • 1
Glyn Jones
  • 131
  • 1
  • 5
  • No, it's still a valid selector. It just correctly matches according to the `value` *attribute* as opposed to the `.value` *property* now. – BoltClock Sep 06 '13 at 17:01
8
$('input:hidden[value=\'3\']');
Frenchi In LA
  • 3,139
  • 3
  • 25
  • 41