How to reference an id with brackets in jQuery

9

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?

Rob

출처 javascript jquery

6 답변

-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);
});

  • 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
  • $(this).val() === this.value remember... you don't need to use jQuery for Everything - rlemon
8
 

$( document.getElementById( "id[2][t]" ) ).change( function(){
  $( "#textpreview" ).text( this.value );
} );

  • 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
  • jsperf.com/vanilla-jquery-one/2 - rlemon
  • @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
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

  • Right...I would like to revise them but that's just not an option. - Rob
  • @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
  • 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
0

Use the attribute selector instead:

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

  • This won't work. text and val are being used in the wrong places. - James Montagne
  • Trolls. Murderous trolls. You know attribute selectors on the entire document are slow, slow, slow as hell. - Raynos
  • @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
  • @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
  • @Rocket It's how the DOM works. developer.mozilla.org/en/Using_the_W3C_DOM_Level_1_Core - Incognito
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?

  • Why you no elem.addEventListener('change', function () { ... }) - Raynos
  • Because I like to incite you to rage, @Raynos (also, .onchange is cross-browser, addEventListener is not) - Ryan Kinal
  • any browser that supports .textContent supports .addEventListener your argument is null - Raynos
-4

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

$('[id="id[2][t]"]')

  • Why a down-vote, care to explain? - Rocket Hazmat
  • 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
  • The concept of using an attribute selector for id makes me vomit. - Raynos
  • @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
  • @Rocket I downvote you for recommending bad code practices. I don't want my internet to slow down to a crawl. - Raynos

Linked

Related

Latest