JavaScript get element by name

javascript html dom
Juliver Galleto picture Juliver Galleto · Apr 24, 2012 · Viewed 400.4k times · Source

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

Answer

Aidanc picture Aidanc · Apr 24, 2012

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

Related questions

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More