Question

This is probably a very simple question but I can’t seem to get this right.

Is it possible to extract a variable “name” from a FORM? I have the following pull-down menus (Simplified)…

<FORM NAME="doc_select">
    <SELECT ID="rec_list"  NAME="rec_info"><OPTION>...</OPTION></SELECT>
    <SELECT ID="term_list" NAME="term_info"><OPTION>...</OPTION></SELECT>
    <SELECT ID="comp_list" NAME="comp_info"><OPTION>...</OPTION></SELECT>
</FORM>

These all trigger a bit of java-script via an “onChange” statement. So far so good.

I want to extract the name, not the value, and then use that extracted name in
a java-script statement like below:

var info = form.*name*.value; 

getElementsByName gives me the value not the name.

Any ideas?

Cheers
Frank

Answer 1

It’s not clear to me what your issue is, so here’s some general stuff. To get the name of the element that called the listener, pass this:

<select id="rec_list"  name="rec_info" onchange="someFn(this)" ... >

You can do much the same with a dynamically added listener. In the function:

function someFn(element) {
  var elementName = element.name;
  var theForm = element.form;
  var theValue = element.value;

  // and so on ...

}

You can also access form controls as properties of the form using their name, so once you have a reference to the form:

form.comp_info

is the third select element in the OP. Note that in this particular case, if there is one control with that name, a reference to the element is returned. If there is more than one control with the same name, a collection is returned. Note also that IE confuses name and id tokens, so never use the same value for the name of one control and the id of another.

The getElementsByName method returns a collection, the members can be accessed by index so the first one would be:

var someElement = document.getElementsByName('foo')[0];

Note that if there are no elements with a name of ‘foo’ then someElement will have a value of undefined.