14

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();
  $("#textpreview").val(txtval);
});

});

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

Any ideas?

César
  • 9,939
  • 6
  • 53
  • 74
Rob
  • 145
  • 1
  • 4

6 Answers6

10
$( document.getElementById( "id[2][t]" ) ).change( function(){
  $( "#textpreview" ).text( this.value );
} );
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • 2
    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
  • @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
4

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

Community
  • 1
  • 1
tomfumb
  • 3,669
  • 3
  • 34
  • 50
  • 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 01 '11 at 14:48
0

Use the attribute selector instead:

var sel = $("[id='id[2][t]']");
sel.change(function() {
  $("#textpreview").val(sel.text());
});
Teddy
  • 18,357
  • 2
  • 30
  • 42
  • 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
  • 1
    @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. – gen_Eric Dec 01 '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 01 '11 at 14:39
  • @Rocket It's how the DOM works. https://developer.mozilla.org/en/Using_the_W3C_DOM_Level_1_Core – Incognito Dec 01 '11 at 14:47
0

Plain Old JavaScript:

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

elem.onchange = function()
{
    var elem = document.getElementById('textpreview');
    elem.removeChild(elem.firstChild)
    elem.appendChild(document.createTextNode(this.value));
}

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

Ryan Kinal
  • 17,414
  • 6
  • 46
  • 63
-1

You have val and text backwards. Swap them:

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

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.

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = this.value;
  $("#textpreview").text(txtval);
});
James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • 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
  • 1
    `$(this).val() === this.value` remember... you don't need to use jQuery for ***Everything*** – rlemon Nov 30 '11 at 20:33
-4

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

$('[id="id[2][t]"]')
gen_Eric
  • 223,194
  • 41
  • 299
  • 337
  • 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 01 '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. – gen_Eric Dec 01 '11 at 14:16
  • 2
    @Rocket I downvote you for recommending bad code practices. I don't want my internet to slow down to a crawl. – Raynos Dec 01 '11 at 14:40
  • 1
    `$(document.getElementById("id[2][t]"))` FTW – rlemon Dec 01 '11 at 14:52
  • @Raynos: Sorry, I didn't realize it was a bad coding practice. I mean having an ID with square braces is bad, so the solution might not always be pretty. Also, I'm sorry my JavaScript slows down your entire internet, you may need to wait an extra 0.1 seconds to watch that YouTube video because of me, sorry. – gen_Eric Dec 01 '11 at 15:40