How to Select Element By Name in JavaScript

There are several ways to select DOM elements in JavaScript. You can select them by name, class, id, tag, and other attributes. Often you may need to select element by name in JavaScript. In this article, we will learn how to do this. We will also see how to select elements by name in JQuery, which provides several powerful ways for this purpose.

How to Select Element By Name in JavaScript

Let us say you have the following element with name=abc.

<input name='abc' type='text'/>

You can easily select this element by name using getElementsByName() function.

document.getElementByName('abc')

The above command will return an array of objects for all elements with name=’abc’. Each object will contain various information about each element, such as its name, value, type, checked, etc. that you can use for further processing.

Since we have only 1 element above, our array will only have 1 item. If you want to get the value of selected element by name, use the value property of the element.

document.getElementsByName("abc")[0].value

If you have multiple elements such as radio buttons, then also you can use getElementsByName(). Here is an example. Let us say you have the following radio buttons all with the same name ‘gender’.

 <input type="radio" name="gender" value="Male">Male
 <input type="radio" name="gender" value="Female">Female
 <input type="radio" name="gender" value="Others">Others

Let us say you have the following button that displays the selected radio button value on being clicked.

<button type="button" onclick="displayRadioValue()">
        Submit
    </button>

Here is a simple JavaScript code that allows you to loop through each radio button, with name ‘gender’ and display its value, if it is checked. We use getElementsByName() function to get an array of objects, each of which contains information about radio button with name ‘gender’.

<script>
        function displayRadioValue() {
            var ele = document.getElementsByName('gender');
              
            for(i = 0; i < ele.length; i++) {
                if(ele[i].checked)
                   alert("Gender: "+ele[i].value);
            }
        }
    </script>

You can also use JQuery to select elements by name. Here are the different ways to select radio buttons with name ‘gender’.

$('input[name="gender"]')   // Matches exactly 'gender'
$('input[name^="gender"]' )  // Matches those that begin with 'gender'
$('input[name$="gender"]' )  // Matches those that end with 'gender'
$('input[name*="gender"]' )  // Matches those that contain 'gender'

As you can see, JQuery provides a lot of flexibility in terms of specifying element selectors, with the help of wildcard characters.

In this article, we have learnt how to select element by name in JavaScript.

How to Select Element By Name in JavaScript

How to Select Element By Name in JavaScript

Related posts:

Leave a Reply Cancel reply