get dynamic id by partial match

Question

im trying to get the id of an element that will be partially dynamic every time, separated by a colon. here is an example of what i mean:

<input type="text" id="j_id235:keyValue" />

the part after the colon is always the same, i need to somehow search by that only.

i've tried this:

console.log(document.querySelector('[id^=:keyValue]').id)

but am getting this error:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '[id^=:keyValue]' is not a valid selector.

I think it's jsf type id and you have forgot to give id in jsf component which remove the requirement to make partial match — Sarjan Desai, Sep 30 '15 at 19:39
This should help: http://stackoverflow.com/questions/1938294/select-div-using-wildcard-id — manonthemat, Sep 30 '15 at 19:44

score 3 · Accepted Answer · answered Sep 30 '15 at 19:40

: is a special character in selectors. If you want to match an attribute value that contains special characters, you have to quote the value.

Also note that ^= is the prefix selector. You probably want the suffix selector:

[id$=":keyValue"]

If you know the element type, it would probably make sense to use that as well:

input[id$=":keyValue"]

More information can be found in the CSS3 specification.

1 Answers1