Javascript select element with complicated ID

Question

need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated

<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>

have a look at this: http://stackoverflow.com/questions/5552462/handling-colon-in-element-id-with-jquery — Dennis, Sep 17 '13 at 06:30
The element's ID ends with `3:j_id63` and you seem to be using `0:j_id63` in your code. Of course that cannot work. — Felix Kling, Sep 17 '13 at 06:57

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

Use this:

$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")

By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).

See more information in this thread:

Handling colon in element ID with jQuery

edited May 23 '17 at 11:49

Community

1
1

answered Sep 17 '13 at 06:33

LaurentG

11,128
9
51
66

Thanks Laurent, have already tried that method but still getting 'null' – user2526777 Sep 17 '13 at 06:35

Eystein Bye · Answer 2 · 2013-09-17T06:38:33.460

0

Do you have any control of the element? Can you add a class to it?

var val= document.getElementsByClassName("TheClassName");

Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:

var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val =  theTD.getElementsByTagName("INPUT");

I need to see more of the HTML to give you an better answer.

edited Sep 17 '13 at 06:38

answered Sep 17 '13 at 06:32

Eystein Bye

5,016
2
20
18

iJade · Answer 3 · 2013-09-17T06:52:26.913

0

You may need to escape colon in your id .So

try this

 function RemoveInvalidCharacter(myid) {
        return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
    }

And call like this

$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));

Have a look at How do I select an element by an ID that has characters used in CSS notation

edited Sep 17 '13 at 06:52

answered Sep 17 '13 at 06:42

iJade

23,144
56
154
243

score 0 · Answer 4 · answered Sep 17 '13 at 06:56

I have tested this code:

   <td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>


<script type="text/javascript">
    document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>

in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?

Replace:

document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")

with

document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")

The id is different.

http://jsfiddle.net/wNePW/

Javascript select element with complicated ID

4 Answers4