getElementsByName to get elements by name within the document

Getting details of the elements by using its Name.

document.getElementsByName('f_name')

Here f_name is the name attribute of a textbox.

Output here

Here is the code for getting data entered inside a textbox by using value

<input type=text  name=f_name > 

<input type=button value=Submit onClick=my_check()>
<br>
<div id=d1_text>Output here </div>
<script type="text/javascript">
function my_check(){
var my_data = document.getElementsByName('f_name'); // array
document.getElementById('d1_text').innerHTML=my_data[0].value
}
</script>

In above code my_data is an array and its first element is my_data[0]. If we have more number of elements with same name then we can get all values by using my_data as an array.

length

my_data.length : will give total number of elements using the same name.

Radio button using getElementsByName

my_r1 my_r2 my_r3

Output here

One group of radio buttons will have one common name. Here is the code to get selected radio button value by using getElementByName

<input type=radio name=r1 value=my_r1> my_r1
<input type=radio name=r1 value=my_r2> my_r2
<input type=radio name=r1 value=my_r3> my_r3

<input type=button name=b1 id=b1 value=Submit onClick=my_check()>
<br>
<div id=d1>Output here </div>
<script type="text/javascript">
function my_check(){
var my_data = document.getElementsByName('r1'); // array 
flag=0
for(i=0;i<my_data.length;i++){
	if(my_data[i].checked){
		var str=my_data[i].value
		flag=1
	}
}
if(flag==1){
document.getElementById('d1').innerHTML=str
}else{
document.getElementById('d1').innerHTML=" Radio button is NOT Selected"
}

}
</script>

Checkbox using getElementsByName

All checkboxes will have common name.
Python PHP JavaScript

Output here

<input type=checkbox name=c1 value=Python> Python
<input type=checkbox name=c1 value=PHP> PHP
<input type=checkbox name=c1 value=JavaScript> JavaScript

<input type=button value=Submit onClick=my_check()>
<br>
<div id=d2  style="width:350;">Output here </div>


<script type="text/javascript">
function my_check(){
var my_data = document.getElementsByName('c1');  
flag=0
str=''
for(i=0;i<my_data.length;i++){
	if(my_data[i].checked){
		 str = str + my_data[i].value +', '
		flag=1
	}
}
if(flag==1){
document.getElementById('d2').innerHTML=str
}else{
document.getElementById('d2').innerHTML=" Checkbox button is NOT Selected"
}

}
</script>

Dropdown Listbox using getElementByName

selectedIndex Gives us the index number ( starting from 0 ) of selected option.

Output here

<select name=s1>
<option value='' selected>Select One</option>
<option value='Jan'>Jan</option>
<option value='Feb'>Feb</option>
<option value='March'>March</option>
<option value='April'>April</option>
</select>

<input type=button value=Submit onClick=my_check_list()>
<br>
<div id=d3>Output here </div>
<script type="text/javascript">
function my_check_list(){
var my_data = document.getElementsByName('s1'); // array 
sel_index=my_data[0].selectedIndex // Index number of Selection
sel_value=my_data[0][sel_index].value 
if(sel_index > 0){
document.getElementById('d3').innerHTML=sel_value
}else{
document.getElementById('d3').innerHTML=" No Selection"
}

}
</script>

Document object Reference getElementByTagName

Subscribe to our YouTube Channel here

Form elements by getElementsByName

length

Radio button using getElementsByName

Checkbox using getElementsByName

Dropdown Listbox using getElementByName

Subscribe