Returning HTML FORM variable name (Not Value)

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

Use `getElementsByName` if you already know the name of the elements, which it does not seem you do here. Maybe you want `getElementsByTagName` and then iterate over them? I'm not quite sure what you want to achieve. — Felix Kling, Sep 28 '12 at 00:28
Are you trying to get the name of the select that was changed? — Surreal Dreams, Sep 28 '12 at 00:34
Let me clarify if I can. I have a bit of javascript that displays a brief summary of any of the documents selected from various pull-down menus. Currently I have multiple copies of this script to handle each pulldown as they all have different names. The different names affect only one line of the script, so if I can extract that name value I can use it in that line and so therefore maintain only one copy of the script — Frankie G, Sep 28 '12 at 01:06

Aust · Answer 1 · 2012-09-28T01:59:40.177

Maybe this code will help you. Check out a demo of this here.

form = document.doc_select;

document.getElementById('rec_list').onchange = function() {
    n = this.name;

    var info = form.elements[n].value;
    console.log('name: ' + n);          //name: rec_info
    console.log('info: ' + info);       //info: 2
};

You get the name of an element by using .name. The elements[] function returns elements based either on name or on index. For example elements[0] would also give the same result but since you don't know the index it does you no good.

UPDATE

After reading your comment, about managing only one script, I think I've understood your question. With just a few minor tweaks to the code this should be what you're looking for:

form = document.doc_select;

document.getElementById('rec_list').onchange = function() {
    onChangeFunction(this.name);
};
document.getElementById('term_list').onchange = function() {
    onChangeFunction(this.name);
};
document.getElementById('comp_list').onchange = function() {
    onChangeFunction(this.name);
};

function onChangeFunction(name){
    //...your code goes here...

    var info = form.elements[name].value;
    console.log('name: ' + name);         //outputs name of element that changed
    console.log('info: ' + info);         //outputs value for that element

    //...more of your code...
}

You no longer need 3 different functions for each of your <select> elements. :) Check it out here.

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

When you use getElementsByName, you are simply asking for the HTMLElement with that name attribute. What you need is to get the attribute "name" from the HTMLElement. You can use jQuery .attr() function if you're able to use jQuery.

EDIT: check out this StackOverflow question Get elements by attribute when querySelectorAll is not available without using libraries?

edited May 23 '17 at 10:24

Community

1
1

answered Sep 28 '12 at 00:30

netpoetica

3,375
4
27
37

score 0 · Answer 3 · answered Sep 28 '12 at 00:35

0

Try this... ` var rec_list = document.querySelector("#rec_list");

alert(rec_list.name); `

answered Sep 28 '12 at 00:35

Ronnel Castillo Ocampo

55
8

score 0 · Accepted Answer · answered Sep 28 '12 at 01:02

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.

Excellent,I just passed the variable and used the var elementName = element.name; although my variable is call "infoName". One other question, now I have the value how do I sub it into the form statement? var info = form.+infoName+.value; Apologies is this is a no brainer, just can;t get this last piece going — Frankie G, Sep 28 '12 at 02:01
Square bracket notation will evaluate expressions to get the name: `form[infoName].value`. But that will just return the same element, or the collection of elements, with the same name. I don't understand why you want to do that. — RobG, Sep 28 '12 at 05:23

Returning HTML FORM variable name (Not Value)

4 Answers4