Javascript getElementById based on a partial string

Question

I need to get the ID of an element but the value is dynamic with only the beginning of it is the same always    Heres a snippet of the code    lt form class  form-poll  id  poll-1225962377536  action   cs Satellite  gt    The ID always starts with poll- then the numbers are dynamic   How can I get the ID using just JavaScript and not jQuery

User · Answer

Try this   function getElementsByIdStartsWith container  selectorTag  prefix        var items           var myPosts   document getElementById container  getElementsByTagName selectorTag       for  var i   0  i  lt  myPosts length  i                omitting undefined null check for brevity         if  myPosts i  id lastIndexOf prefix  0      0                items push myPosts i                        return items      Sample HTML Markup    lt div id  posts  gt       lt div id  post-1  gt post 1 lt  div gt       lt div id  post-12  gt post 12 lt  div gt       lt div id  post-123  gt post 123 lt  div gt       lt div id  pst-123  gt post 123 lt  div gt   lt  div gt    Call it like  var postedOnes   getElementsByIdStartsWith  posts    div    post-      Demo here  http   jsfiddle net naveen P4cFu

User · Answer

Given that what you want is to determine the full id of the element based upon just the prefix  you re going to have to do a search of the entire DOM  or at least  a search of an entire subtree if you know of some element that is always guaranteed to contain your target element    You can do this with something like   function findChildWithIdLike node  prefix        if  node  amp  amp  node id  amp  amp  node id indexOf prefix     0              match found         return node               no match  check child nodes     for  var index   0  index  lt  node childNodes length  index              var child   node childNodes index           var childResult   findChildWithIdLike child  prefix           if  childResult                return childResult                       Here is an example   http   jsfiddle net xwqKh   Be aware that dynamic element ids like the ones you are working with are typically used to guarantee uniqueness of element ids on a single page   Meaning that it is likely that there are multiple elements that share the same prefix   Probably you want to find them all     If you want to find all of the elements that have a given prefix  instead of just the first one  you can use something like what is demonstrated here   http   jsfiddle net xwqKh 1

User · Answer

lt form class  form-poll  id  poll-1225962377536  action   cs Satellite  target   blank  gt    The ID always starts with  post-  then the numbers are dynamic   Please check your id names   poll  and  post  are very different   As already answered  you can use querySelector   var selectors     id   poll-     element   document querySelector selectors  id    but querySelector will not find  poll  if you keep querying for  post     id   post-

User · Answer

You ll probably have to either give it a constant class and call getElementsByClassName  or maybe just use getElementsByTagName  and loop through your results  checking the name   I d suggest looking at your underlying problem and figure out a way where you can know the ID in advance   Maybe if you posted a little more about why you re getting this  we could find a better alternative

User · Answer

I m not entirely sure I know what you re asking about  but you can use string functions to create the actual ID that you re looking for   var base    common   var num   3   var o   document getElementById base   num       will find id  common3    If you don t know the actual ID  then you can t look up the object with getElementById  you d have to find it some other way  by class name  by tag type  by attribute   by parent  by child  etc       Now that you ve finally given us some of the HTML  you could use this plain JS to find all form elements that have an ID that starts with  poll-       get a list of all form objects that have the right type of ID function findPollForms         var list   getElementsByTagName  form        var results           for  var i   0  i  lt  list length  i              var id   list i  id          if  id  amp  amp  id search   poll-      -1                results push list i                        return results         return the ID of the first form object that has the right type of ID function findFirstPollFormID         var list   getElementsByTagName  form        var results           for  var i   0  i  lt  list length  i              var id   list i  id          if  id  amp  amp  id search   poll-      -1                return id                       return null

User · Answer

You use the id property to the get the id  then the substr method to remove the first part of it  then optionally parseInt to turn it into a number   var id   theElement id substr 5     or   var id   parseInt theElement id substr 5

User · Answer

querySelectorAll with modern enumeration polls   document querySelectorAll   id     quot poll- quot      Array prototype forEach call polls  callback    function callback element  iterator        console log iterator  element id      The first line selects all elements which id starts with the string poll-  The second line evokes the enumeration and a callback function

User · Answer

You can use the querySelector for that   document querySelector   id   poll-     id    The selector means  get an element where the attribute  id  begins with the string  poll-      matches the start   matches any position   matches the end    jsfiddle

[javascript] Javascript getElementById based on a partial string

Examples related to javascript

Examples related to getelementbyid