Get an element by name with JavaScript/jQuery

This post will discuss how to get elements by name using JavaScript and jQuery.

1. Using jQuery

You can use the Attribute Equals Selector ([name='value']) to select elements with the given name in jQuery. Note, this might return more than one element since one can apply the same name to multiple elements within the document.

jQuery

$(document).ready(function() {

var languages = $("[name='language']");

for (var lang of languages) {

console.log(lang.value);

}

});

HTML

<p>Select your preferred language:</p>

<div>

<label for="english">English</label>

<label for="hindi">Hindi</label>

<label for="spanish">Spanish</label>

</div>

Edit in JSFiddle

2. Using JavaScript

In pure JavaScript, you can use the native getElementsByName() method, which returns the NodeList of all elements having the given name.

JS

var languages = document.getElementsByName("language");

for (var lang of languages) {

console.log(lang.value);

}

HTML

<p>Select your preferred language:</p>

<div>

<label for="english">English</label>

<label for="hindi">Hindi</label>

<label for="spanish">Spanish</label>

</div>

Edit in JSFiddle

Alternatively, you can use the querySelectorAll() method to get all elements within the document having the given name.

JS

var languages = document.querySelectorAll("[name='language']");

for (var lang of languages) {

console.log(lang.value);

}

HTML

<p>Select your preferred language:</p>

<div>

<label for="english">English</label>

<label for="hindi">Hindi</label>

<label for="spanish">Spanish</label>

</div>

Edit in JSFiddle

That’s all about getting an element by name in JavaScript and jQuery.

Get an element by name with JavaScript/jQuery

1. Using jQuery

jQuery

HTML

2. Using JavaScript

JS

HTML

JS

HTML

Share this: