jQuery .val() returns undefined at complex id

Question

I have two hidden input fields:

<input type="hidden" name="institut" id="institut" value="blablub" />
<input type="hidden" name="institut[0]" id="institut[0]" value="moreblablub" />

I have this debugging code:

console.log("#institut: " + $("#institut").val());
console.log("#institut[0]: " + $("#institut[0]").val());

And I get this console output:

#institut: blablub
#institut[0]: undefined

I trid to escape the square brackets with backslashes but that did not change anything. Is there a way to get hold of complex ID's?

Answer 1

You should not be using non alphanumeric characters for an id.

But if you do you can do:

var element = document.getElementById("institut[0]");
var $element = $(element);

Demo: http://jsfiddle.net/maniator/sWnJN/

Or

var $element = $("#institut\\[0\\]");

Demo: http://jsfiddle.net/maniator/sWnJN/1/

Or even:

var $element = $("[id='institut[0]']");

Demo: http://jsfiddle.net/maniator/sWnJN/2/

Answer 2

You have to escape the brackets:

$( '#institut\\[0\\]' ).val()

Live demo: http://jsfiddle.net/Qsagn/

Brackets are special characters in CSS - they define attribute selectors. You need to double-escape the brackets. A single escape \[ is not enough, since the \ character is a special character in string literals, so you need \\ in order to escape the \ character, so that it is interpreted as a literal character.