4

How do I go about selecting html elements that the id contains a given string? would querySelectorAll accomplish this? I know I can select classes, id's, attributes etc... with querySelectorAll,

Just not sure the correct approach for what I need to do

Here is some code that I would like to only get the elements where the id contains Home

<div id="ContactContainer>
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerWorkAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerWorkExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerWorkSuffix" placeholder="9999">


    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerHomeAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerHomeExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerHomeSuffix" placeholder="9999">


    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerMobileAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerMobileExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerMobileSuffix" placeholder="9999">
</div>
Chris
  • 2,953
  • 10
  • 48
  • 118
  • 2
    imo you'd be better off adding classes for that. – Pointy Feb 11 '20 at 16:32
  • Get the parent container with `document.querySelectorAll('#ContactContainer')`, then get the children of this element, iterate through the children and `forEach` element if the Id is equal to what you want then push it to an array or do whatever you want with it. – Kevin Hernandez Feb 11 '20 at 16:34
  • 1
    This might help: https://stackoverflow.com/questions/12155833/css-selector-id-contains-part-of-text#answer-12157322 – vhbazan Feb 11 '20 at 16:34

1 Answers1

15

You can use wildcard selectors as shown below to match a partial attribute tag, including id. 

document.querySelector('[id*="MobileAreaCode"]');

If you want more than one element to be returned use querySelectorAll.

document.querySelectorAll('[id*="Mobile"]');
Chris Hawkes
  • 11,923
  • 6
  • 58
  • 68
  • Sorry if I am missing something, but that works for the way you are proposing, but how do i find the elements if they contain a string, such as Home or Mobile. Maybe I not understanding correctly? – Chris Feb 11 '20 at 16:40
  • Contain a string inside the id attribute? If you're looking for multiple elements which contain part of a string in the ID attribute (or any other attribute) I updated my answer to show how. – Chris Hawkes Feb 11 '20 at 16:44
  • Yes...So with this txtCustomerHomeAreaCode, I want to find the elements where the id contains Home etc... – Chris Feb 11 '20 at 16:45
  • That did the trick, thanks. The only issue i have now is that those elements are in divs that contain the same text in its id, so now i just got to find out how to just get the inputs. Thanks for putting on the right path – Chris Feb 11 '20 at 16:48
  • 1
    Just figured it out – Chris Feb 11 '20 at 16:48