CODEWITHSUNDEEP
javascriptgetelementsbyname
Frankie G
Frankie G

Reputation: 91

Returning HTML FORM variable name (Not Value)

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

Upvotes: 1

Views: 922

Answers (4)

Aust
Aust

Reputation: 11602

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

Upvotes: 1

RobG
RobG

Reputation: 147363

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.

Upvotes: 0

Ronnel Castillo Ocampo
Ronnel Castillo Ocampo

Reputation: 55

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

alert(rec_list.name); `

Upvotes: 0

netpoetica
netpoetica

Reputation: 3425

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?

Upvotes: 0

Related Questions