View Full Version : Howto reference dynamically named objects

Dec 5th, 2002, 08:54 PM

I have a form in which I dynamically name the names of text input fields. How can I reference the name of one of those objects in order to give it a new value?

i.e. text field names go from box1 to box6. The number within the name is issued dynamically through a loop process written in Cold Fusion. Then I want to update the value in one of the boxes but I don't know the name of it! I tried adding the actual name into a js variable, then adding that into the reference path:

var boxval=box3

this does not work. Says the object is null or doesn't exist.

Any insight?
Thank you very much.

Dec 5th, 2002, 09:24 PM
I do the same thing, but I have a few dynamically on the page...

var textArray = new Array();
function harnessDynname(){
var y = 0;
for (var i = 0; i<document.yourformname.elements.length; i++) {
if (document.yourformname.elements[text].name -1) {

now, you have an array of all the "text" input boxes on your page and their names..so, if you need them, just reference the textArray.....

Dec 5th, 2002, 09:46 PM
My brain is toasty right now, and I'm somewhat new at the whole JS gig, so forgive my density:

I don't get the "if" statement, particulary what "text" should be. Also, what exactly is that question questioning?


Dec 6th, 2002, 02:03 AM

I didn't check what I wrote you. sorry, there are some mistakes..

(document.yourformname.elements[text].name != -1)

I am a little heavy handed here....
what the code does is go thru the whole page and gather all the names of the 'text' input boxes on your page. maybe you need to put a quote around 'text'...

it puts the names of the input boxes (text) into an array....anyways....just try this..

var boxval=String(box3)

Dec 6th, 2002, 09:27 AM
Dear dulatoag, you can use either :

var boxval="box3" // "box3" is the name of your input.
document.myForm[boxval].value=0; // myForm is the name of your form, do not use form as the name of a form since it's a keyword and might cauze some conflicts


var boxval="box3" // "box3" is the name of your input.
eval("document.mForm." + boxval + ".value=0");

And you BrightNail, don't you think that using document.getElementsByTagName("input").name is more efficient?

Dec 6th, 2002, 05:45 PM
I am not familiar with that method until now..

but the reason being is probably because I have to code for the least common denominator..............in other words, 4.0 and higher browsers for PC/MAC..IE/Netscape.

I'll look into that method more...yes, it does seem that it would be more efficient to just make that call, rather than looping...

Dec 7th, 2002, 08:55 PM
Actually you have to go through a loop if you wana take them all my friend! It just gets all the elements by their id! Like if you wanted to know how many paragraphs you used in your page, you could have found out by :


And now if you wana change the color of all of them, you have to go through a loop like this

ourLength = document.getElementsByTagName("p").length;
for (i=0; i<ourLength; i++)
document.getElementsByTagName("p")[i].style.color = "red";

I hope that it helped!

Dec 8th, 2002, 01:52 AM
Well I thank you both extremely much for your input. I'm trying these things tonite and will let you know what works! Another wild Saturday night ...

Dec 8th, 2002, 04:50 AM
but the reason being is probably because I have to code for the least common denominator..............in other words, 4.0 and higher browsers for PC/MAC..IE/Netscape.

Right. You need NN 6.0+ or IE 5.0+ to use the getElementbyId.

What I want to know is how do you know which box you want change?

Anyway, If you have an "onchange" event for each box you don't need to know the name. You do this:

<input type="text" name="whocares" value="initial value" onchange="aJavascriptFunction(this);">

and volia! you've passed the text box you changed to the function.

Also, if you name all your text boxes the same you can go through them as an array, but going back to my original question, how do you know which one you want?

<input type="text" name="myTextBoxes" value="box1 value">
<input type="text" name="myTextBoxes" value="box2 value">
<input type="text" name="myTextBoxes" value="box3 value">

<script type="text/javascript"
function processTextBoxes () {
// just where & when you call this function, you decide.

for (var i=0; i<document.formName.myTextBoxes.length; i++) {
if (document.formName.myTextBoxes[i].value == "whatever") {
// do what you need to do

Dec 8th, 2002, 07:00 AM
in my case,

I assume that the 'search' thru the elements gives me the 'elements' on the page in order..

in other words..if I have a group of select boxes like so,,




then, as I reiterate thru the document model to retrieve them, then they will populate the array in the same order..ala.

somearray = new Array (box1,box2,box3);



Dec 9th, 2002, 08:51 PM

Your solution works absolutely beautifully and it's easy to implement. thanks much.