1

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

Improve this question
3
  • 1
    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. Commented Sep 28, 2012 at 0:28
  • Are you trying to get the name of the select that was changed? Commented Sep 28, 2012 at 0: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 Commented Sep 28, 2012 at 1:06

4 Answers 4

Reset to default
1

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. ​

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

2 Comments

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
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.
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?

Improve this answer

Comments

0

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

alert(rec_list.name); `

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.