Targeting hidden inputs by id using jQuery

Question

For some reason I am unable to retrieve hidden inputs by id using jQuery.

I can do

> $('input')
[<input type="checkbox" name="property-type" id checked>, <input type="checkbox" name="property-type" id checked>, <input type="checkbox" name="property-type" id>, <input type="checkbox" name="property-type" id>, <input type="hidden" name="no-of-rooms" id="1-rooms">, <input type="hidden" name="no-of-rooms" id="2-rooms" checked>, <input type="hidden" name="no-of-rooms" id="3-rooms" checked>, <input type="hidden" name="no-of-rooms" id="4-rooms">, <input type="hidden" name="no-of-rooms" id="5-rooms">, <input type="hidden" name="no-of-rooms" id="over-5-rooms">, <input type="checkbox" name="property-type" id>, <input type="checkbox" name="property-type" id>, <input type="checkbox" name="property-type" id>]

which gets me all of the inputs on the page nicely, including those of type=hidden.

I can also do

> $('input[type="hidden"]')
[<input type="hidden" name="no-of-rooms" id="1-rooms">, <input type="hidden" name="no-of-rooms" id="2-rooms" checked>, <input type="hidden" name="no-of-rooms" id="3-rooms" checked>, <input type="hidden" name="no-of-rooms" id="4-rooms">, <input type="hidden" name="no-of-rooms" id="5-rooms">, <input type="hidden" name="no-of-rooms" id="over-5-rooms">]

which gets me all of my hidden fields. Note they all have an id.

For some reason trying to target those inputs by their id, either with or without the [type="hidden"] included, will get me an empty list.

> $('input[type="hidden"]#2-rooms')
[]
> $('input#2-rooms')
[]

I have managed to find a workaround by simply not targeting them by their ID-s, but it would be useful to know why this doesn't seem possible.

EDIT

Using just $('#2-rooms') works for me and is apparently the best approach. However, I am still unsure as to why $('input#2-rooms') is not working, as I had in fact included the html5 doctype (<!DOCTYPE html>), and I understand ids beginning with numbers should in this case be okay.

Most likely you aren't using HTML5, and before HTML5, ID's could not start with a numeric character. Try using the html5 doctype to confirm: ` ` (or you could just change the id's to not use a numeric character as it's first character) — Kevin B, May 03 '13 at 15:43
Silly me for not trying `$('#2-rooms')`, which does work (although I'd still prefer to specify that it is an input for clarity..). I also now tried `$('input#over-5-rooms')` which doesn't start with a number and does work as well. I have included the html5 doctype, so this shouldn't be the issue, also confirmed by the fact that `$('#2-rooms')` seems to work fine. — Elise, May 03 '13 at 15:47
The permutations of the 2 queries you have shown in your question seem to work fine in FF and Chrome and even IE9: http://jsfiddle.net/3KwKr/ but as others have said if you are querying by id only using the id is plenty as identifiers should be unique across the page. — Nope, May 03 '13 at 15:49
@Elise It is better to use `$('#2-rooms')` instead of `$('input#2-rooms')` - I believe the latter would find all input element and then matches the ID attribute instead of just looking for the element with ID which is the fastest known selector. — Selvakumar Arumugam, May 03 '13 at 15:50
@Vega: +1 Good advise. Out of curiosity I also wanted to know what the performance difference is and how much faster it is to just use the identifier. Just using the identifier is a lot faster than element-id: http://jsperf.com/id-vs-element-with-id — Nope, May 03 '13 at 15:59
@FrançoisWahl Here is a nice article on writing efficient selectors http://csswizardry.com/2011/09/writing-efficient-css-selectors/ — Elise, May 03 '13 at 16:01
This might sound weird but, for HTML: `` and jQuery: `$('input[type=hidden]#inp1')` I do get the object `[]`. I am using `Chrome v28` and `jQuery v1.9.1` — Sourabh, Jul 28 '13 at 19:02
@Sourabh I never quite understood the issue myself, but I believe it has to do with input names beginning with numbers, and since `inp1` begins with a letter it would work just fine. — Elise, Jul 28 '13 at 20:25

Adil · Answer 1 · 2013-05-03T15:56:56.087

1

You can use wild card ends with using attribute selector, instead of using id selector.

$('[id$=rooms]')

OR, use * for contains

$('[id*=rooms]')

Or if you have single element with id, live demo

 $('#2-rooms')

Edit If you have single element with id then you can simply use id selector $('#2-rooms') If more then one elements have same id then it is not valid html you should have unique ids. If you have ids with pattern like 2-rooms, 3-rooms then you have use attribute selector with wild cards.

edited May 03 '13 at 15:56

answered May 03 '13 at 15:42

Adil

146,340
25
209
204

1

OP has found a work around, the question is why wont the id selector work. – Freeman Lambda May 03 '13 at 15:44
I think OP in OP solution we have to give input in selector like $('input#2-rooms') – Adil May 03 '13 at 15:46
1

This does work as well, as does targeting individual hidden fields using `$('input[id="2-rooms"]')`. Thanks! – Elise May 03 '13 at 15:51
@Elise Even `$('input[type="hidden"]').filter(function () { return this.id === '2-rooms'; })` should work well, but it is a overkill when you just want to select an element with ID such as `#2-rooms` which could be easily achieved by `$('#2-rooms')`. – Selvakumar Arumugam May 03 '13 at 15:56
You can simply use id selector if you have single element $('#2-rooms'), http://jsfiddle.net/TRB7B/2/ – Adil May 03 '13 at 15:57

Targeting hidden inputs by id using jQuery

1 Answers1