How To Get An Element By Name Attribute Using JavaScript

get an Element by Name Attribute using JavaScript

If you want to select/edit all items with a specific name and don’t know how to do that, don’t miss this article. This article will introduce how to get an Element by Name Attribute using JavaScript. Please read it.

How to get an Element by Name attribute using JavaScript

Method: Using the getElementsByName() method

The getElementsByName() method returns a collection of elements with a specified name.

Syntax:

document.getElementsByName(name);

Parameter: name is the value of the name attribute of the element(s).

The method that returns the Objects/NodeList element whose name attribute matches the specified name.

Example code

<div>
  <label>Full Name</label>
  <input type="text" id="fullName" name="fullName" value="LearnShareIT">
</div>
<div>
  <label>Major</label>
  <input type="text" id="major" name="major" value="Information Technology">
</div>
const fullName = document.getElementsByName('fullName');
const major = document.getElementsByName('major');
console.log(fullName[0].value);
console.log(major[0].value);

When we access the document with getElementsByName(), it will return the Nodelist containing all nodes whose name attribute matches fullName. You can iterate and print the array if multiple matching values are found.

Output

LearnShareIT
Information Technology

Example code

<!DOCTYPE html>
<html> 
<head>
    <meta charset="utf-8">
    <title>JavaScript getElementsByName by LearnShareIT</title>
</head> 
<body>
    <h3>JavaScript getElementsByName by LearnShareIT</h3>
    <p>Question 1: What is the name of the capital of America?</p>
    <p>
        <label for="Ottawa">
            <input type="radio" name="answer" value="Ottawa" id="Ottawa"> Ottawa
        </label>
        <label for="Santiago">
            <input type="radio" name="answer" value="Santiago" id="Santiago"> Santiago
        </label>
        <label for="Mexico City">
            <input type="radio" name="answer" value="Mexico City" id="Mexico City"> Mexico City
        </label>
        <label for="Washington D.C">
            <input type="radio" name="answer" value="Washington D.C"> Washington D.C
        </label>
        <label for="newYork">
            <input type="radio" name="answer" value="New York" id="New York"> New York
        </label>
    </p>
    <p>
        <button id="btnSubmit">Submit</button>
    </p>
    <p id="output"></p>
    <script>
        let button = document.getElementById('btnSubmit');
        let output = document.getElementById('output');
 
        button.addEventListener('click', () => {
            let rates = document.getElementsByName('answer');
            rates.forEach((rate) => {
                if (rate.checked) {
                    output.innerText = `You Answer is: ${rate.value}`;
                }
            }); 
        });
    </script>
</body> 
</html>
  • The getElementsByName() returns a live NodeList of elements with a specified name.
  • The NodeList is an array-like object, not an array object.

Output

Before choosing the answer and pressing the submit button
After choosing the answer and pressing the submit button

Supported Browsers: 

Almost browsers supported the use Javascript getElementsByName() method specified below: 

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1 and above
  • Internet Explorer 4 and above
  • Opera 4 and above
  • Safari 1 and above

Summary

In this tutorial, we have explained how to get an Element by Name attribute using Javascript by using the getElementsByName() method. We hope this tutorial is helpful to you. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *