1

I've got a HTML page containing elements that I need to access using JQuery. Here is an example of how the form elements are identified:

<div id="nItemID[766]Line" class="formLine ">
   <span id="nItemID[766]Label" class="formLabel alignTop">Téléphone:</span>
   <input id="nItemID[766]Field" class="formField" type="text" maxlength="11" value="" name="nItemID[766]" style="width: 300;">
</div>

When I try to show the ID of a particular element, it tells me: nItemID[766]Label, for example. But when I type that code, it doesn't find anything...

alert( $("#nItemID[766]Field").val() );

Could someone help me with the way to access those particular elements ?

Thank you!

Julie Laporte
  • 89
  • 7
  • It is not a valid ID to operate.. "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")." – Selvakumar Arumugam Feb 22 '12 at 20:35
  • `[]` are invalid characters for IDs. See http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – calebds Feb 22 '12 at 20:35
  • Thechnically, that jquery selector is looking for an element with id `nItemID` and has an attribute named `766`. `[]` is not allowed in IDs for this reason. – Marc B Feb 22 '12 at 20:36
  • @MarcB That is not at all the reason. HTML was not designed with jQuery in mind. – Paul Feb 22 '12 at 20:38
  • 1
    To those saying the id here is invalid, if the OP is using the HTML5 doctype, the id is perfectly valid containing those characters. – Rory McCrossan Feb 22 '12 at 20:39
  • Guys I don't think HTML 5 puts any restrictions on the characters in an "id" element other than that there cannot be any spaces. Otherwise, there are no restrictions. – Pointy Feb 22 '12 at 20:40
  • The only restrictions on `id` in HTML5: `The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters` http://www.w3.org/TR/html5/elements.html#the-id-attribute – Rory McCrossan Feb 22 '12 at 20:42

4 Answers4

5

You'll have to escape the square brackets with backslashes:

alert($('#nItemID\\[766\\]Field').val());

It's a little bit questionable to have "id" values like that, but I've been in situations in which they're hard to avoid.

edit — note that you need two backslashes in the string so that the jQuery selector interpreter can "see" them; that is, you need to leave a single backslash in the string, and the way to do that in JavaScript is to double the backslash I hate explaining that.

edit again — Here's what the HTML 5 draft has to say about "id" attributes:

3.2.3.1 The id attribute

The id attribute specifies its element's unique identifier (ID). [DOMCORE]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

No rules about the values of "id" attributes, in other words, other than that they cannot contain spaces.

Community
  • 1
  • 1
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 1
    @RoryMcCrossan yes sorry, fixed now. – Pointy Feb 22 '12 at 20:37
  • Thank's a lot. I do not have access to the source code of that application, so I cannot change the way the ID's are created and used ;) I cant just use them ! – Julie Laporte Feb 22 '12 at 20:38
  • @Pointy +1 Interesting note about id's in HTML5. I'd have never guessed. To be honest I dislike how far from strict HTML5 is, as I've always liked the strictness of strict :P As long as you follow it not much can go wrong, but it's always good to learn up on some of the changes. – Paul Feb 22 '12 at 20:44
  • 1
    @PaulP.R.O. agreed - my experience however is that some server-side frameworks for example might want to generate `` elements with "id" values that match the "name" attribute, and furthermore which use brackets for dealing with vector/list type values. It's dumb but sometimes something has to yield, and browsers have traditionally been the yieldingest things around :-) – Pointy Feb 22 '12 at 20:47
0

That is invalid HTML. [ and ] are not valid characters in ids. You can use them in names like you already do on your input element, but not in ids.

You should change your ids to be something like nItemID_766_Field. Then it will be a valid id and you can easily just change the number for each nItem.

Edit

As Pointy pointed out it is valid in HTML 5. So you shouldn't need to change your id's unless you are trying to conform to HTML 4.

Paul
  • 139,544
  • 27
  • 275
  • 264
  • Thanks but I don't have access to the code ;) This is an application bought by my boss and the source code is encrypted... The only way for me to modify it is using JQuery... – Julie Laporte Feb 22 '12 at 20:37
  • The HTML 5 spec does not impose any constraints on "id" attribute values, as far as I can tell. – Pointy Feb 22 '12 at 20:39
  • @JulieLaporte Encrypted source code? That sucks... Is it in PHP? If it is you could write a wrapper around the whole thing that captures the output with `ob_start()`. Then you can fix the buggy HTML in PHP before it is sent to the browser. A PHP extension like Tidy might even have a way to do it automatically. I'm not sure though as I've never used an extension for that. Someone else may now. Perhaps you could ask it as a question if you want to fix the HTML. – Paul Feb 22 '12 at 20:41
  • Couldn't he use the DOM? I would have thought it is incorrect to say that JQuery is the only way to go. – ScrollerBlaster Feb 22 '12 at 20:41
  • @PaulP.R.O. it's a whole lot of fun :-) – Pointy Feb 22 '12 at 20:44
  • @PaulP.R.O., thanks a lot. I didn't know the existence of such extensions! Unfortunately a big part of the code is already done so... – Julie Laporte Feb 22 '12 at 20:48
  • @ScrollerBlaster, I use JQuery as it's the fastest, easier and greatest manner to call PHP using Ajax, to modify the DOM etc. I could have certainly use other ways, but I had to choose one ;) By the way, it's not "he", it's "she" ;) – Julie Laporte Feb 22 '12 at 20:49
  • @Julie Sorry for talking about you in the third person in the first place :-) – ScrollerBlaster Feb 22 '12 at 20:56
0

Your IDs are invalid, see this.

Community
  • 1
  • 1
bfavaretto
  • 71,580
  • 16
  • 111
  • 150
  • Thanks but I don't have access to the code ;) This is an application bought by my boss and the source code is encrypted... The only way for me to modify it is using JQuery... – Julie Laporte Feb 22 '12 at 20:37
0

Try instead document.getElementById("nItemID[766]Field").value. Apparently jQuery doesn't support ids with braces.

Juzer Ali
  • 4,109
  • 3
  • 35
  • 62