What is document.getElementsByName() method in Javascript ?
Document getElementsByName() method returns collection of all elements of particular document by name.
The collection of elements is called as node list.
Each element in the node list will be indexed, but default it started with 0.
Elements can be accessed with the help of indexed number.
We can get the value of the element by using document.getElementsByName(“name”)[index].value.
Otherwise the statement returns “undefined“.
Why we use getElementsByName() ?
getElementsByName() method is used to access the collection of elements and manipulate the multiple elements.
This is the most commonly used method used to load dynamic content in the web pages.
Javascript basic tutorial !!!
Click to Learn More about – Javascript online learning
Syntax :
document.getElementsByName("name");
document :
This refers the current document (ie) HTML page.
name :
This refers to the “name” of the element
return value :
This function returns the collection of elements
If the “name” element doesn’t exists, It returns “null”
We can also find the length of the elements by
document.getElementsByName("name").length;
1. document.getElementsByName(“name”);
In this example we have 3 input box Name,Age and Location with “name” attribute p1,p2,p3.
We will get the input box values by using document.getElementsByName(“name”); method when the buttons are clicked.
And printing the Name, Age and Location values next to the buttons.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:200px;
height:30px;
font-size: 20px;
}
</style>
<script>
function getNameVal() {
var pid1 = document.getElementsByName("p1")[0].value;
var sid1 = document.getElementById("sid1");
sid1.innerHTML = sid1.innerHTML + "" + pid1;
}
function getAgeVal() {
var pid2 = document.getElementsByName("p2")[0].value;
var sid2 = document.getElementById("sid2");
sid2.innerHTML = sid2.innerHTML + "" + pid2;
}
function getLocVal() {
var pid3 = document.getElementsByName("p3")[0].value;
var sid3 = document.getElementById("sid3");
sid3.innerHTML = sid3.innerHTML + "" + pid3;
}
</script>
</head>
<body>
<div id="dId-1">
Name : <span style="padding-left:55px;"><input type="text" name="p1"></span><br/>
Age : <span style="padding-left:68px;"><input type="text" name="p2"></span><br/>
Location : <span style="padding-left:30px;"><input type="text" name="p3"></span><br/>
</div>
<div id="dId-2">
<p>
<button class="b1" id="b1" onclick="getNameVal()">Print Name Value</button>
<span id="sid1" style="padding-left:20px;"></span>
</p>
<p>
<button class="b2" name="b2" onclick="getAgeVal()">Print Age Value</button>
<span id="sid2" style="padding-left:20px" ></span>
</p>
<p>
<button class="b3" name="b3" onclick="getLocVal()">Print Location Value</button>
<span id="sid3" style="padding-left:20px"></span>
</p>
<div>
</body>
</html>
Output :
1. Before the executing the function
2. After the executing the function
2. document.getElementsByName(“name”);
With same name “p1” for “name” attribute for all input boxes.
In this example we have 3 input box Name,Age and Location with “name” attribute “p1”.
We will get the input box values by using document.getElementsByName(“name”)[index].value; method when the buttons are clicked.
And printing the Name,Age and Location values next to the buttons.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:200px;
height:30px;
font-size: 20px;
}
</style>
<script>
function getNameVal() {
var pid1 = document.getElementsByName("p1")[0].value;
var sid1 = document.getElementById("sid1");
sid1.innerHTML = sid1.innerHTML + "" + pid1;
}
function getAgeVal() {
var pid2 = document.getElementsByName("p1")[1].value;
var sid2 = document.getElementById("sid2");
sid2.innerHTML = sid2.innerHTML + "" + pid2;
}
function getLocVal() {
var pid3 = document.getElementsByName("p1")[2].value;
var sid3 = document.getElementById("sid3");
sid3.innerHTML = sid3.innerHTML + "" + pid3;
}
</script>
</head>
<body>
<div id="dId-1">
Name : <span style="padding-left:55px;"><input type="text" name="p1"></span><br/>
Age : <span style="padding-left:68px;"><input type="text" name="p1"></span><br/>
Location : <span style="padding-left:30px;"><input type="text" name="p1"></span><br/>
</div>
<div id="dId-2">
<p>
<button class="b1" id="b1" onclick="getNameVal()">Print Name Value</button>
<span id="sid1" style="padding-left:20px;"></span>
</p>
<p>
<button class="b2" name="b2" onclick="getAgeVal()">Print Age Value</button>
<span id="sid2" style="padding-left:20px" ></span>
</p>
<p>
<button class="b3" name="b3" onclick="getLocVal()">Print Location Value</button>
<span id="sid3" style="padding-left:20px"></span>
</p>
<div>
</body>
</html>
Output :
1. Before the executing the function
2. After the executing the function
