Menu
I would like to be able to use javascript to find every id (or name) for every object in an html document so that they can be printed at the bottom of the page.
To understand more fully what I'm trying to accomplish, let me explain. I build large forms from time to time for things such as property applications, rental listings, detailed medical website user registration forms and such. As I do it now, I build the form, assign the id's and names and decide which values are required and such. Then when I build the php form validation and database insert portion for the form, I've been manually going through the html and pulling out all of the id's to reference from the $_post array for the input validation and database insert. This has been very time consuming and a real pain, often laced with typing errors.
The form I'm working on currently is just too big, and I'd much rather write a javascript function that I can run on my local copy of the page to list all of the id's so that I don't have to copy and paste them one by one, or write them down. I could then also use the javascript loop to event print out the php code around the id names so that I'd only have to copy the list and lightly edit out the id's I dodn't need... I hope you guys get the idea.
Any suggestions on how I can drop all of the id's into an array, or if there is already an array I can access and loop through (I couldn't find anything on google). Also, any suggestions for how to speed up the process of producing large forms with a work flow that generates the php or makes it quicker than my current method would be greatly appreciated!
343
Use the document. querySelectorAll() method to get all elements whose id starts with a specific string, e.g. document. querySelectorAll('[id^="box"]') . The method returns a NodeList containing all the elements that match the provided selector.
Use the querySelectorAll() method to get all elements by type, e.g. document. querySelectorAll('input[type="text"]') . The method returns a NodeList containing the elements that match the provided selector.
In JavaScript, we can use the getElementsByTagName() method to access all the elements with the given tag name. This method is the same as the getElementsByName() method. Here, we are accessing the elements using the tag name instead of using the name of the element.
Use the querySelectorAll() method to select elements by multiple ids, e.g. document. querySelectorAll('#box1, #box2, #box3') . The method takes a string containing one or more selectors as a parameter and returns a collection of the matching elements.
On modern browsers you can do this via
document.querySelectorAll('*[id]') should do the job.
If you need all descendants of myElement with IDs, then do
myElement.querySelectorAll('*[id]') If you want to be really careful to exclude <span id="">, then maybe
document.querySelectorAll('*[id]:not([id=""])') If compatibility with older browsers is required
var allElements = document.getElementsByTagName("*"); var allIds = []; for (var i = 0, n = allElements.length; i < n; ++i) { var el = allElements[i]; if (el.id) { allIds.push(el.id); } } should leave you with all the IDs in allIds.
If you find you need to just enumerate the IDs under a particular form node, then you can replace document.getElementsByTagName with myFormNode.getElementsByTagName.
If you want to include both IDs and NAMEs, then put
else if (el.name) { allIds.push(el.name); } below the if above.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
