Take the 2-minute tour ×

I'm painfully new to jQuery and I need to grab the value on change of a text input box with an id of id[2][t] and display that text in a div to be styled later on (also styled with jQuery).

This is the input box code:

<input id="id[2][t]" name="id[2][t]" maxlength="20" type="text">

This is the div I am trying to display it in:

<div id="textpreview"></div>

This is what I have tried, among other variation with no success:

$(document).ready(function() {

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = $('#id\\[2\\]\\[t\\]').text();


I know the brackets are a problem but they need to remain for other reasons.

Any ideas?

share|improve this question
add comment

6 Answers

up vote -1 down vote accepted

You have val and text backwards. Swap them:

  var txtval = $('#id\\[2\\]\\[t\\]').val();

val is used to get the value of the textbox. text to set the text within the div.

You can further simplify the code by using this instead of re-querying the element.

  var txtval = this.value;
share|improve this answer
This seems to work well and it's shorter. Thank you. This is off topic but how would I change the class of that div based on the value of a select box with the id id[3]? –  Rob Nov 30 '11 at 20:13
$(this).val() === this.value remember... you don't need to use jQuery for Everything –  rlemon Nov 30 '11 at 20:33
add comment
$( document.getElementById( "id[2][t]" ) ).change( function(){
  $( "#textpreview" ).text( this.value );
} );
share|improve this answer
getById inside of the JQuery puke actually performs 30% faster at selecting ID's from the DOM. (let me see if I can still find that perf) –  rlemon Nov 30 '11 at 20:23
jsperf.com/vanilla-jquery-one/2 –  rlemon Nov 30 '11 at 20:25
@Rob if you are using jQuery to without complex selectors I would suggest implementing this - any performance improvement when manipulating the DOM is desirable.. –  rlemon Nov 30 '11 at 20:28
add comment

You might consider revising your IDs (though I'm guessing they might be auto-generated). According to this question your IDs are invalid against the spec

share|improve this answer
Right...I would like to revise them but that's just not an option. –  Rob Nov 30 '11 at 20:13
@Rob ok that's fair enough, but keep this in mind if you have any other funky problems down the road. If your markup isn't valid you are that little bit more susceptible to cross-browser problems –  tomfumb Nov 30 '11 at 20:16
Yeah, generally you don't want to make IDs like this. It doesn't make sense. I assume these IDs reflect a table, in which case the DOM naturally provides a means for you to do this without having to assign any IDs –  Incognito Dec 1 '11 at 14:48
add comment

Plain Old JavaScript:

var elem = document.getElementById('id[2][t]');

elem.onchange = function()
    var elem = document.getElementById('textpreview');

Ahhh... now doesn't that feel better?

share|improve this answer
Why you no elem.addEventListener('change', function () { ... }) –  Raynos Dec 1 '11 at 14:49
Because I like to incite you to rage, @Raynos (also, .onchange is cross-browser, addEventListener is not) –  Ryan Kinal Dec 1 '11 at 14:50
any browser that supports .textContent supports .addEventListener your argument is null –  Raynos Dec 1 '11 at 15:31
Point taken edited –  Ryan Kinal Dec 1 '11 at 17:05
add comment

Use the attribute selector instead:

var sel = $("[id='id[2][t]']");
sel.change(function() {
share|improve this answer
This won't work. text and val are being used in the wrong places. –  James Montagne Nov 30 '11 at 20:05
Trolls. Murderous trolls. You know attribute selectors on the entire document are slow, slow, slow as hell. –  Raynos Nov 30 '11 at 20:24
@Raynos: We do? How do you know that we know stuff? I, for one, did not know that. Thanks for being polite and explaining it. –  Rocket Hazmat Dec 1 '11 at 14:32
@Rocket ;_; An attribute selector goes through the entire context (document by default) checking every single node for whether it matches that attribute with that value. People should know / understand this. –  Raynos Dec 1 '11 at 14:39
@Rocket It's how the DOM works. developer.mozilla.org/en/Using_the_W3C_DOM_Level_1_Core –  Incognito Dec 1 '11 at 14:47
add comment

You can try using the attribute selector instead of the id selector.

share|improve this answer
Why a down-vote, care to explain? –  Rocket Hazmat Nov 30 '11 at 20:35
not the downvoter but seeing as this answer is duplicate to the above answer that also got downvoted, it might be for same reasons :-) –  Esailija Nov 30 '11 at 20:46
The concept of using an attribute selector for id makes me vomit. –  Raynos Dec 1 '11 at 13:18
@Raynos: So that's it, that's why down-voted me? I guess you'd rather have \\[ and \\]? For one item in the DOM, who cares if it's slow? You can cache this lookup, or add maybe a class to it or change its ID so you can speed up lookups in the future. I don't know about you, but I hate having backslashes all over my strings, looks hideous. I think they have medicine for you that may help with vomiting, hope you feel better. –  Rocket Hazmat Dec 1 '11 at 14:16
@Rocket I downvote you for recommending bad code practices. I don't want my internet to slow down to a crawl. –  Raynos Dec 1 '11 at 14:40
show 2 more comments

Your Answer


