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 TechnologyExample 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
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:
- Add a class to the Body element using JavaScript
- Add Line breaks to a Textarea using JavaScript
- Change the Text of a Div Element using JavaScript
My name is Fred Hall. My hobby is studying programming languages, which I would like to share with you. Please do not hesitate to contact me if you are having problems learning the computer languages Java, JavaScript, C, C#, Perl, or Python. I will respond to all of your inquiries.
Name of the university: HUSC
Major: IT
Programming Languages: Java, JavaScript, C , C#, Perl, Python
