Posted By
Bajarangi soft ,
Posted On 29-09-2020
The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as an HTMLCollection object and The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
Tip: You can use the length property of the HTMLCollection object to determine the number of elements with the specified name, then you can loop through all elements and extract the info you want.
Note: In HTML5, the "name" attribute is deprecated and has been replaced by the "id" attribute for many elements. Use the document.getElementById() method where it is appropriate. Also look at the getElementsByClassName() and getElementsByTagName() methods.
Syntax and Usage
document.getElementsByName(name)
Parameter Values
name String Required. The name attribute value of the element you want to access/manipulate
Example(1)
First Name: <input name="fname" type="text" value="Shiva"><br>
<br>
<h2 id="demo"></h2>
<br>
<button class="btn btn-primary" onclick="tag_name()">Click it</button>
<script>
function tag_name() {
var x = document.getElementsByName("fname")[0].tagName;
document.getElementById("demo").innerHTML = x;
}
</script>
In above example when you click the button to get the tag name of the first element in the document that has a name attribute with the value "fname".
Example(2)
Veg:
<input name="food" type="checkbox" value="veg">
Non Veg:
<input name="food" type="checkbox" value="nonveg">
<br>
<h2 id="demo"></h2>
<br>
<button class="btn btn-primary" onclick="count_checkbox()">Click it</button>
<script>
function count_checkbox() {
var x = document.getElementsByName("food").length;
document.getElementById("demo").innerHTML = x;
}
</script>
Veg:
<input name="food" type="checkbox" value="veg">
Non Veg:
<input name="food" type="checkbox" value="nonveg">
<br>
<h2 id="demo"></h2>
<br>
<button class="btn btn-primary" onclick="tick_checkbox()">Click it</button>
<script>
function tick_checkbox() {
var x = document.getElementsByName("food");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].type == "checkbox") {
x[i].checked = true;
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM GetElementsByName Method In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1 {
color: red;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>HTML DOM GetElementsByName Method In JavaScript</h1>
</div>
<br>
<div class="well">
First Name: <input name="fname" type="text" value="Shiva"><br>
<br>
Veg:
<input name="food" type="checkbox" value="veg">
Non Veg:
<input name="food" type="checkbox" value="nonveg">
<br>
<h2 id="demo1"></h2>
<br>
<h2 id="demo2"></h2>
<br>
<button class="btn btn-primary" onclick="tag_name()">Click it</button>
<br><br>
<button class="btn btn-primary" onclick="count_checkbox()">Click it</button>
<br><br>
<button class="btn btn-primary" onclick="tick_checkbox()">Click it</button>
<br><br>
</div>
<br>
</div>
</body>
</html>
<script>
function tag_name() {
var x = document.getElementsByName("fname")[0].tagName;
document.getElementById("demo1").innerHTML = x;
}
function count_checkbox() {
var x = document.getElementsByName("food").length;
document.getElementById("demo2").innerHTML = x;
}
function tick_checkbox() {
var x = document.getElementsByName("food");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].type == "checkbox") {
x[i].checked = true;
}
}
}
</script>