JavaScript getElementsByName()

document.getElementsByName() returns a NodeList containing elements whose name attribute matches the supplied value. It is especially useful with form controls such as radio buttons and checkboxes, where multiple elements intentionally share the same name.

const fields = document.getElementsByName("f_name");
console.log(fields.length);

Syntax:

document.getElementsByName("nameValue")

Read a Textbox by Name Top ↑

This keeps the original tutorial idea: find a textbox by its name and display the entered value.

const fields = document.getElementsByName("f_name");
const output = document.getElementById("d1_text");

output.textContent = fields[0]?.value || "";

Because the result is a collection, access the first matching element with index 0. Optional chaining (?.) avoids an error when there is no match.

NodeList Length and Iteration Top ↑

The length property tells you how many elements matched.

const controls = document.getElementsByName("choice");
console.log(controls.length);

controls.forEach((control) => {
  console.log(control.value);
});

Radio Buttons Using getElementsByName() Top ↑

Radio buttons in one group normally share the same name. The checked radio can be found by iterating over the returned list.

const radios = document.getElementsByName("r1");
let selectedValue = "";

for (const radio of radios) {
  if (radio.checked) {
    selectedValue = radio.value;
    break;
  }
}

For a single radio group, a CSS selector can be shorter: document.querySelector('input[name="r1"]:checked').

Checkboxes Using getElementsByName() Top ↑

Checkboxes can share a name while allowing multiple selections. Collect the values of the checked controls rather than using a separate numeric flag.

const checkboxes = document.getElementsByName("c1");
const selected = [];

for (const checkbox of checkboxes) {
  if (checkbox.checked) selected.push(checkbox.value);
}

console.log(selected.join(", "));

Select Element Using getElementsByName() Top ↑

The original tutorial used selectedIndex. That property remains useful, although the selected option value is usually available directly through the select element's value property.

const selects = document.getElementsByName("s1");
const select = selects[0];

if (select && select.selectedIndex > 0) {
  console.log(select.value);
}

When to Use an Alternative Top ↑

getElementsByName() is a good fit when the HTML name attribute is semantically important, especially for form submission groups. For general DOM selection, CSS selectors are often more flexible.

const selectedRadio = document.querySelector('input[name="r1"]:checked');
const selectedCheckboxes = document.querySelectorAll('input[name="c1"]:checked');

When you already have a form element, form.elements.namedItem("name") can also be useful because it limits the lookup to that form.

Common Mistakes Top ↑

• Using getElementsByName() as if it returns one element. It returns a NodeList, even when only one element matches.
• Accessing index 0 without checking whether a match exists.
• Using undeclared variables such as flag or str; use const or let.
• Using innerHTML when only text is being displayed; use textContent.
• Confusing the name attribute with id. Multiple form controls can share a name, but IDs should be unique.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: