Avatar of Tom Knowlton
Tom Knowlton
Flag for United States of America

asked on 

Find all elements where name contains substring

Is it possible to do something like

 selects = document.getElementsByID("");

but instead gather all elements where a substring is part of the longer ID value?

=======

I have a bunch of UserControls.  They HTML they render looks like what you see in the snippet.

Of paritcular interest is this part, the opening SELECT tag:

   <select name="ctl00$ctl00$bodyContent$mainContent$DirManCollection$DirectoryManagementDropDownURL$DropDownListMapping" id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownURL_DropDownListMapping" onchange="checkSelectValues(this)" style="width:200px;">



Notice the ID is:

id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownURL_DropDownListMapping"

or

id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownTitle_DropDownListMapping"



It is different every time.


But the one part that stays the same is the last part of the string:

"...DropDownListMapping"


If I could gather all elements where "DropDownListMapping" is a substring of the larger unique ID string --- that would be the ideal.


Then you could modify this function:

 function checkSelectValues(element)
        {

INSTEAD OF THIS:
            selects = document.getElementsByTagName("SELECT");
      
DO THIS:

            selects = document.getElementsWhereIDContains("DropDownListMapping");

              for (x in selects)
              {
                    if ((selects[x].id != element.id) && selects[x].value == element.value)
                    {
                        selects[x].selectedIndex = 0;
                    }
                    else
                    {
                    }
              }
        }





<tr>
        <td style="width:100px;">
            <span id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownTitle_LabelFieldTitle">Title:</span>
        </td>
        <td>
            <select name="ctl00$ctl00$bodyContent$mainContent$DirManCollection$DirectoryManagementDropDownTitle$DropDownListMapping" id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownTitle_DropDownListMapping" onchange="checkSelectValues(this)" style="width:200px;">
	<option selected="selected" value="&lt;not selected>">&lt;not selected&gt;</option>
	<option value="search">search</option>
	<option value="TITLE">TITLE</option>
	<option value="URL">URL</option>
	<option value="TITLE1">TITLE1</option>
	<option value="URL1">URL1</option>
	<option value="TITLE2">TITLE2</option>
	<option value="URL2">URL2</option>
	<option value="TITLE3">TITLE3</option>
	<option value="URL3">URL3</option>
	<option value="TITLE4">TITLE4</option>
	<option value="URL4">URL4</option>
	<option value="TITLE5">TITLE5</option>
	<option value="URL5">URL5</option>
	<option value="DESCRIPTION_limit">DESCRIPTION_limit</option>
	<option value="META_KEYWORDS">META_KEYWORDS</option>
	<option value="META_DESCRIPTION_limit">META_DESCRIPTION_limit</option>
	<option value="OWNER_NAME">OWNER_NAME</option>
	<option value="OWNER_EMAIL">OWNER_EMAIL</option>
	<option value="RECPR_URL">RECPR_URL</option>
	<option value="CAPTCHA">CAPTCHA</option>
 
</select>
        </td>
    </tr>
</table>
        </td>
    </tr>
    <tr>
        <td>
            
 
<table>
    <tr>
        <td style="width:100px;">
            <span id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownURL_LabelFieldTitle">URL:</span>
        </td>
        <td>
            <select name="ctl00$ctl00$bodyContent$mainContent$DirManCollection$DirectoryManagementDropDownURL$DropDownListMapping" id="ctl00_ctl00_bodyContent_mainContent_DirManCollection_DirectoryManagementDropDownURL_DropDownListMapping" onchange="checkSelectValues(this)" style="width:200px;">
	<option selected="selected" value="&lt;not selected>">&lt;not selected&gt;</option>
	<option value="search">search</option>
	<option value="TITLE">TITLE</option>
	<option value="URL">URL</option>
	<option value="TITLE1">TITLE1</option>
	<option value="URL1">URL1</option>
	<option value="TITLE2">TITLE2</option>
	<option value="URL2">URL2</option>
	<option value="TITLE3">TITLE3</option>
	<option value="URL3">URL3</option>
	<option value="TITLE4">TITLE4</option>
	<option value="URL4">URL4</option>
	<option value="TITLE5">TITLE5</option>
	<option value="URL5">URL5</option>
	<option value="DESCRIPTION_limit">DESCRIPTION_limit</option>
	<option value="META_KEYWORDS">META_KEYWORDS</option>
	<option value="META_DESCRIPTION_limit">META_DESCRIPTION_limit</option>
	<option value="OWNER_NAME">OWNER_NAME</option>
	<option value="OWNER_EMAIL">OWNER_EMAIL</option>
	<option value="RECPR_URL">RECPR_URL</option>
	<option value="CAPTCHA">CAPTCHA</option>
 
</select>
        </td>
    </tr>

Open in new window

JavaScriptASP.NET

Avatar of undefined
Last Comment
Tom Knowlton

8/22/2022 - Mon