Javascript getElementById based on a partial string

javascript queryselector
queryselectorall
document getelementbyid is not a function
uncaught typeerror: document getelementbyid is not a function
getelementbyid regex
document getelementbyid returns null
document getelementbyid not working
document getelementbyid is null

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.

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">

The ID always starts with poll- then the numbers are dynamic.

How can I get the ID using just JavaScript and not jQuery?


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

How to get Javascript getElementById base on partial string?, Use the selector [id$="<END OF ID HERE>"] : const table = document.querySelector('[id$="-LRSYSCPU"]'); console.log(table); <TABLE� Definition and Usage The getElementById () method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document. Returns null if no elements with the specified ID exists.


Try this.

function getElementsByIdStartsWith(container, selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementById(container).getElementsByTagName(selectorTag);
    for (var i = 0; i < 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.

<div id="posts">
    <div id="post-1">post 1</div>
    <div id="post-12">post 12</div>
    <div id="post-123">post 123</div>
    <div id="pst-123">post 123</div>
</div>

Call it like

var postedOnes = getElementsByIdStartsWith("posts", "div", "post-");

Demo here: http://jsfiddle.net/naveen/P4cFu/

How to Find Elements by Substring of ID or Name in Javascript , when accessing those elements from Javascript. This article provides a workaround by search out, and updating, elements on the page based on a substring� Find answers to getElementByID using partial id? (getElementByID('clientRow'+anything)) from the expert community at Experts Exchange


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 && node.id && node.id.indexOf(prefix) == 0) {
        //match found
        return node;
    }

    //no match, check child nodes
    for (var index = 0; index < 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/

getElementById like something - JavaScript, No, but if you can get yourself a reference to all the possible elements, you can iterate through them and use string functions to inspect the value of the id attribute. body.onload is triggered as soon as the page code (that exact html/php/asp file) is rendered, not when all the elements have been loaded.window.onload, on the other hand, is triggered when all the elements have been loaded such as scripts, images etc. – inhan Jan 4 '13 at 12:49


querySelectorAll with modern enumeration
polls = document.querySelectorAll('[id ^= "poll-"]');
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.

GetElementByID - Partial IDs, function getRealId(partialid){ var re= new RegExp(partialid,'g') var el = document.getElementsByTagName('*'); for(var i=0;i<el.length;i++){ if(el[i].id.match(re)){� var mytextvalue = document.getElementById("mytext"); mytextvalue will contain null if you have a document.write() statement before this code. So remove the document.write statement and you should get a proper text object in the variable mytextvalue. This is caused by document.write changing the document.


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 < list.length; i++) {
        var id = list[i].id;
        if (id && 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 < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            return(id);
        }
    }
    return(null);
}

Searching: getElement*, querySelector, getElementById or just id. If an element has the id attribute, we can get the element using the method document.getElementById(id) , no� document.getElementById or just id. If an element has the id attribute, we can get the element using the method document.getElementById(id), no matter where it is. For instance:


HTML DOM contains() Method, and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. The getElementsByClassName () method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object. The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.


JavaScript String slice() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� The third partial view can be either a partial view to create a new e-mail address or a partial view to create a new postal address, depending on the value selected in the second partial view. The following illustration shows Customer/Edit with annotations identifying the (partial) view, view model, and the controller action (method) associated


Document.getElementById(), The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. String: Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma.