Question

This is driving me nuts, and I’m sure it’s both possible and surely simple to do.

I have a page with a whole bunch of dynamically created forms on it. In one of my functions, I need to access one of those forms, so I pass the name of the form in a variable.

Then I need to access the name of that form using the document tree.

However, when I put in the variable, it assumes the name of the variable is the name of the form.

So this does not work:

function myAwesomeFunction(nameOfForm)
{
 var selection = document.nameOfForm.nameOfInput.selectedIndex;
}

So I looked around the net and saw that I need to use bracket notation, but this doesn’t work either:

function myAwesomeFunction(nameOfForm)
{
 var selection = document[nameOfForm].nameOfInput.selectedIndex;
}

I also tried with some quotation action:

function myAwesomeFunction(nameOfForm)
{
 var selection = document['nameOfForm'].nameOfInput.selectedIndex;
}

… but no joy.

So, where am I going wrong?

For bonus points… what if both the name of the form and the name of the particular input were both dynamic? Then what?

function myAwesomeFunction(nameOfForm, nameOfInput)
{
 var selection = document[nameOfForm][nameOfInput].selectedIndex;
}

Answer 1

Look them up in the forms object – this won’t work since it is an array and not an object.

use document.getElementsByName

function myAwesomeFunction(nameOfForm, nameOfInput)
{
 var selection = document.getElementsByName(nameOfForm)[nameOfInput].selectedIndex;
}

or even better, set an id attribuite on the form and use document.getElementById to find the form