search

getElementsByName()

hashtag
Introduction to JavaScript getElementsByName() method

Every element on an HTML document may have a name attribute:

<input type="radio" name="language" value="JavaScript">Code language: HTML, XML (xml)

Unlike the id attribute, multiple HTML elements can share the same value of the name attribute like this:

<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">Code language: HTML, XML (xml)

To get all elements with a specified name, you use the getElementsByName() method of the document object:

let elements = document.getElementsByName(name);Code language: JavaScript (javascript)

The getElementsByName() accepts a name which is the value of the name attribute of elements and returns a live NodeList of elements.

The return collection of elements is live. It means that the return elements are automatically updated when elements with the same name are insertedarrow-up-right and/or removedarrow-up-right from the document.

hashtag
JavaScript getElementsByName() example

The following example shows a radio group that consists of radio buttonsarrow-up-right that have the same name (rate).

When you select a radio button and click the submit button, the page will show the selected value such as Very Poor, Poor, OK, Good, or Very Good:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript getElementsByName Demo</title>
</head>

<body>
    <p>Please rate the service:</p>
    <p>
        <label for="very-poor">
            <input type="radio" name="rate" value="Very poor" id="very-poor"> Very poor
        </label>
        <label for="poor">
            <input type="radio" name="rate" value="Poor" id="poor"> Poor
        </label>
        <label for="ok">
            <input type="radio" name="rate" value="OK" id="ok"> OK
        </label>
        <label for="good">
            <input type="radio" name="rate" value="Good"> Good
        </label>
        <label for="very-good">
            <input type="radio" name="rate" value="Very Good" id="very-good"> Very Good
        </label>
    </p>
    <p>
        <button id="btnRate">Submit</button>
    </p>
    <p id="output"></p>
    <script>
        let btn = document.getElementById('btnRate');
        let output = document.getElementById('output');

        btn.addEventListener('click', () => {
            let rates = document.getElementsByName('rate');
            rates.forEach((rate) => {
                if (rate.checked) {
                    output.innerText = `You selected: ${rate.value}`;
                }
            });

        });
    </script>
</body>

</html>Code language: HTML, XML (xml)

How it works:

  • First, select the submit button by its id btnRate using the getElementById()arrow-up-right method.

  • Second, listen to the clickarrow-up-right event of the submit button.

  • Third, get all the radio buttons using the getElementsByName() and show the selected value in the output element.

Notice that you will learn about eventsarrow-up-right like click later. For now, you just need to focus on the getElementsByName() method.

hashtag
Summary

  • The getElementsByName() returns a live NodeList of elements with a specified name.

  • The NodeList is an array-like object, not an arrayarrow-up-right object.

PreviousgetElementById()NextquerySelector()

Last updated