184

Consider this function:

function validate()
{
  var acc = document.getElementsByName('acc').value;
  var pass = document.getElementsByName('pass').value;

  alert (acc);
}

And this HTML part:

<table border="0" cellpadding="2" cellspacing="0" valign="top">
    <tr>
        <td class="td1">Account</td>
        <td class="td2"><input type="text" name="acc" /></td>
    </tr>
    <tr class="td1">
        <td>Password</td>
        <td class="td2"><input type="password" name="pass" /></td>
    </tr>
</table>
<div><button onClick="validate()" class="cupid-greenx">Login now</button></div>

The alert box is showing, but it shows "undefined".

Improve this question
3
  • 1
    If you can change it altogether, I would recommend adding a field "id" to your two input fields, and use document.getElementById, which returns exactly one value. Commented Apr 24, 2012 at 21:22
  • 4
    better still: var inputs = document.getElementsByTagName('input'), returns a nodelist, from which you can extract both elements like so: var pass = inputs.item('pass'). Just a tip, this can speed things up if you're dealing with a big DOM, as getElementById will search the entire tree each time, whereas a nodelist won't, so it's faster... Commented Apr 24, 2012 at 21:34
  • Little cute code indeed XD Commented May 22, 2014 at 20:30

8 Answers 8

Reset to default
334

The reason you're seeing that error is because document.getElementsByName returns a NodeList of elements. And a NodeList of elements does not have a .value property.

Use this instead:

document.getElementsByName("acc")[0].value
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

65

All Answers here seem to be outdated. Please use this now:

document.querySelector("[name='acc']");
document.querySelector("[name='pass']")
Improve this answer

Comments

37

Note the plural in this method:

document.getElementsByName()

That returns an array of elements, so use [0] to get the first occurence, e.g.

document.getElementsByName()[0]
Improve this answer

9 Comments

It's not an array, it's a NodeList :-)
@FlorianMargaine - Actually it's a HTMLCollection ;)
@j08691 nope :) but it can be easy to be confused :p
Whats the definition of an array and how is this different? A NodeList is just an object wrapped around an array of HTMLElements with a few convenience methods. Anyway, to put it in layman's terms for the OP, I said an array.
An array has a lot more methods than a NodeList. A NodeList takes some methods/properties from arrays such as the length property, but it's also missing a lot of methods, such as map, forEach, etc. Which explains why we need to use: Array.prototype.forEach.call( NodeList, fn ).
|
17

You want this:

function validate() {
    var acc = document.getElementsByName('acc')[0].value;
    var pass = document.getElementsByName('pass')[0].value;

    alert (acc);
}
Improve this answer

3 Comments

Thank you for using the OP's example in your answer.
@KrisBoyd, the difference is that I'm getting the first element from the array returned by getElementsByName. Maybe I should've made that more clear -- feel free to edit if you like.
I was giving you a complement :) none of the higher answers form it in the same format at the OP
9

Method document.getElementsByName returns an array of elements. You should select first, for example.

document.getElementsByName('acc')[0].value
Improve this answer

1 Comment

It's not an array, it's a NodeList :-)
6 
document.getElementsByName("myInput")[0].value;
Improve this answer

1 Comment

Just to be clear: this is getting an element out of a NodeList. :)
2

Just for completeness so others reading this have a good idea of safety nets, especially with no guarantee to get the element you want, you could test for missing values, using null coalesce to set a default:

const accElements = document.getElementsByName('acc');
const accElement = accElements[0] ?? null; // Or some other value
if (!accElement) {
    // handle the problem
}

And use Optional chaining when it's connected objects (and not arrays/nodes being returned):

const acc = document.getElementById('acc')?.value ?? null; // Or some other value

Also, while the name attribute is sometimes all that is available, do try to use id where possible as they have more chance of being unique. Assuming that your desired element is in results index 0 ([0]) is usually safe, but better to check and be sure. For a few lines of code (with some logging perhaps) you save your end users the problems of things breaking.

Improve this answer

Comments

0

If you have many input you can try this:

<input type="text" name="unitOfAttachService">
<input type="text" name="unitOfAttachService">
<input type="text" name="unitOfAttachService">

this line is used to get all values of the tag input

let unitOfAttachService =document.getElementsByName("unitOfAttachService");

this is how to get it out of the list and use

for (let k = 0; k < unitOfAttachService .length; k++) {
  unitOfAttachService[k].value;}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.