Javascript select *id (with wildcard)

Question

I have a hidden input field:

<input type="hidden" id="entity__token" name="entity[_token]" value="SOMEVALUE" />

In my HTML the value of 'entity' in the attributes name and id could be anything, for example:

<input type="hidden" id="example__token" name="example[_token]" value="SOMEVALUE" />

I try to get the value of any kind of input field where the id ends with __token.

After reading this question I tried:

var hiddenField = document.querySelector("[id^='__token']");
console.log(hiddenField.value);

That didn't work. I am looking for a solution without any jQuery.

The attribute selector you tried, `"[id^='__token']"`, selects elements whose `id` *starts* with the string you supplied. You're looking to identify elements whose `id` *ends* with that string: `"[id$='__token']"` — David Thomas, Jun 17 '19 at 13:02
@LucaKiebel, anything like `id="some__token" name="some[_token]"` where 'some' can change. David's comment together with his comment of Roy's answer is of great help. — Dirk J. Faber, Jun 17 '19 at 13:12
@DavidThomas unless you're struggling to find a duplicate that you're sure is there, I don't see why you shouldn't post your comment as an actual answer. — Federico klez Culloca, Jun 17 '19 at 13:12

Roy Bogado · Answer 1 · 2019-06-18T05:39:08.430

0

* would work!

var hiddenField = document.querySelector("[id*='__token']");
console.log(hiddenField.value);

<input type="hidden" id="entity__token" name="entity[_token]" value="TtoNGqMMgMybh-JVttVSVWAOnyYe6s9eRnSOaBujtAE" />

Matches if the element has the given attribute whose value starts with the provided string.

vs.

Matches if the element has the given attribute whose value contains the provided string.

edited Jun 18 '19 at 05:39

answered Jun 17 '19 at 13:02

Roy Bogado

That appears to be the (unmodified) code from the question. If you can't reproduce the problem, say so in a comment, not an answer. – Quentin Jun 17 '19 at 13:02
@Quentin it's not. The selector is different (`*` instead of `^`) – Federico klez Culloca Jun 17 '19 at 13:03
@Quentin Please do check. It is not. – Manish Khedekar Jun 17 '19 at 13:04
2

After editing, it is now clear that it isn't … the answer would be a lot clearer with an explanation for what the difference between `^` and `*` means. – Quentin Jun 17 '19 at 13:04
@Roy please next time don't over-format your answers. It's just distracting. – Federico klez Culloca Jun 17 '19 at 13:06
2

Bear in mind that the `[id*="__token']` selector you use would also match the (*highly improbable, but worth mentioning for future readers and **their** use cases*) values `]arbitraryString__token']arbitraryString` and `__token']]arbitraryString`. – David Thomas Jun 17 '19 at 13:09

1 Answers1