How to Get Elements By Name in JavaScript

HTML elements can be identified with the use of id or class attributes; id is used for unique elements that occur once on a web document (e.g. #logo), class is used for repeating elements (e.g. .section-title). Another identifying attribute that can be used for HTML elements is the name attribute which defines the name of an element.

The name attribute can be used for a number of HTML elements such as <button>, <form>, <iframe>, <input>, <object>, <select> and <textarea> (you can see the full list here), but they are mostly used for identifying form elements for they are used in sending data that is submitted via the form, like the following example:

<form name="login" action="login.php" method="post">
  <input type="text" name="username">
  <input type="text" name="password">
</form>

TIP: In HTML 5, name attribute is no longer supported for <a> element for creating named anchors, it is recommended to use id instead.

Although it is more common to use the id or class to access and manipulate a DOM (Document Object Model) element via JavaScript, there may be cases where you need to get elements by their names, in other words, the value they are assigned by their name attributes.

In the following example,s I will show how you can get an element by its name with JavaScript.

Get Elements By Name in JavaScript

Let's create an HTML element with a name attribute first.

TIP: Multiple HTML elements can have the same name such as a group of radio buttons that offers a selection option on a form.

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

The above code creates an input field that is named as username. We use the following JavaScript code to get this element by its name:

document.getElementsByName('username')

The method we used in order to get the input element by its name is getElementsByName(). Why it has plural "Elements" in it is because more than one HTML elements may have the same name value as also mentioned in the tip above.

If you have one single element that has this name value, like username text field in our example, the JavaScript code gets only this element. If you have multiple elements with the same name value like in the following example, JavaScript will get all those elements. In both cases, the elements will be stored in an array, therefore you should be paying attention to using them as an array in the rest of your code.

For example, if you want to add an onclick event to this input field, you need to use something like the following:

document.getElementsByName('username')[0].onclick = function() {
  ...
}

The [0] we added selects the first element that is returned via the document.getElementsByName('username') array.

Let's see an example with multiple elements with the same name:

<form name="signup" action="signup.php" method="post">
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</form>

The above HTML code is used on a signup form that asks the users to select their gender by clicking on either of the radio buttons. As you noticed, the two radio buttons have the same name value. That's because a radio button is used for a single selection option, hence by giving them the same name, the selection marker knows which gender to select and which ones to deselect.

To get these two radio button elements, we use the following code:

var genders = document.getElementsByName('gender');

This will assign the two radio button elements to the genders array, and then you can process them as you wish.

TIP: getElementsByName() method may also return the elements with the same id as the name in Internet Explorer and Opera (possibly fixed in the latest versions), therefore, it is recommended not to have the same values for id and name attributes of different elements.

You can then manipulate each element with the help of a for loop as follows:

var genders = document.getElementsByName('gender');

for (i = 0; i < genders.length; i++) {
  /* do something with genders[i] or anything else */
}

f t g+ in