getElementsByName()
in [JavaScript]
|
Prev: [Codefest] Prizes worth 104,000 INR at stake for RAD. Certificates to all participants.
Next: FAQ Topic - How do I POST a form to a new window? (2010-02-27)
From: monkeys paw on 26 Feb 2010 12:35 I want to use this but i need to "match" a partial name. For instance, in the form i have mulitple note elemtents: <input name="notes0000"> <input name="notes0001"> i could use getElementsByName("notes0000") and so on, but i don't know how many notes boxes there will be. Any help?
From: Martin Honnen on 26 Feb 2010 12:43 monkeys paw wrote: > I want to use this but i need to "match" a partial name. > For instance, in the form i have mulitple note elemtents: > > <input name="notes0000"> > <input name="notes0001"> > > i could use getElementsByName("notes0000") and so on, but i don't > know how many notes boxes there will be. Any help? If you know you are only looking for 'input' elements then use getElementsByTagName('input') and loop through the result, checking the name property. If you are looking for all kind of elements then use getElementsByTagName('*') and loop through the result, checking the name property, as far as it exists. If you are only looking for form controls (e.g. input, textarea, select) inside of a certain 'form' element then looping through the elements collection of that form element object is also an option. You will again have to check the name property. -- Martin Honnen http://msmvps.com/blogs/martin_honnen/
From: Thomas 'PointedEars' Lahn on 26 Feb 2010 16:50 monkeys paw wrote: > I want to use this but i need to "match" a partial name. Why? > For instance, in the form i have mulitple note elemtents: > > <input name="notes0000"> > <input name="notes0001"> > > i could use getElementsByName("notes0000") and so on, but i don't > know how many notes boxes there will be. Any help? In addition to Martin's suggestions, consider A) using the same name for all relevant elements. As the identifier says, document.getElement*s*ByName() returns a list of matching element nodes. However, this can be a problem because not all element types can have a `name' attribute (even though it works sometimes anyway). B) using (different) IDs (and `id' attribute values) that have a common prefix and numeric infix or suffix (here: starting with 0) to refer to the elements, and the following approach: var o, prefix = "foo", i = 0; while ((o = document.getElementById(prefix + (i++)))) { /* access o */ } (Add wrappers and feature tests where you deem them necessary.) This would generally work with getElementsByName(), too, without changing the markup, however you need to be aware that `o' would refer to an object that implements the NodeList interface then. Not so with the `elements' collection in forms, or other collections. Yet another possibility is C) using the same CSS class name in the `class' attribute value of different elements. But retrieving the corresponding element nodes will be less efficient than the other approaches in the worst case (XPath support may not be available, and document.getElementsByClassName() or document.querySelectorAll() are rather new, still proprietary methods that may not be available, so you need to write a user implementation for document tree traversal for where they are not.) PointedEars -- Danny Goodman's books are out of date and teach practices that are positively harmful for cross-browser scripting. -- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
From: Thomas 'PointedEars' Lahn on 26 Feb 2010 22:32
Martin Honnen wrote: > monkeys paw wrote: >> I want to use this but i need to "match" a partial name. >> For instance, in the form i have mulitple note elemtents: >> >> <input name="notes0000"> >> <input name="notes0001"> >> >> i could use getElementsByName("notes0000") and so on, but i don't >> know how many notes boxes there will be. Any help? > > If you know you are only looking for 'input' elements then use > getElementsByTagName('input') and loop through the result, checking the > name property. If you are looking for all kind of elements then use > getElementsByTagName('*') and loop through the result, checking the name > property, as far as it exists. Since the prefix and the composition of the suffix is known, a loop over getElementsByName(prefix + changingSuffix) or XPath are by magnitudes faster than iterating over all (input) elements and checking their `name' property. > If you are only looking for form controls (e.g. input, textarea, select) > inside of a certain 'form' element then looping through the elements > collection of that form element object is also an option. You will again > have to check the name property. Iterating over all items of the collection and checking their `name' property value is unnecessary because we already know the name prefix and the composition of the suffix. So a loop using ..elements[prefix + changingSuffix] suffices and is a lot faster. (Even faster would be using the same name, since we could access the resulting NodeList directly then.) PointedEars -- Prototype.js was written by people who don't know javascript for people who don't know javascript. People who don't know javascript are not the best source of advice on designing systems that use javascript. -- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk> |