Open In App

How to select an element by name with jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn to get the selected element by name in jQuery. An element can be selected by the name attribute using two methods:

We will understand both methods with the help of examples.

Using the name selector method

The name attribute selector can be used to select an element by its name. This selector selects elements that have a value exactly equal to the specified value.

Syntax:

[name="nameOfElement"]

Example: This example illustrates the use of the name selector method to select the specific element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
          How to select an element by name with jQuery?
      </title>
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>How to select an element by name with jQuery?</b>
        <p>
            The textbox below has the <b>name attribute 'address'.</b>
          <form>
              <textarea rows="4" cols="40" name="address"></textarea>
          </form>
        </p>
 
        <p>
            The textbox below has the
              <b>name attribute 'area'.</b>
        <form>
            <input type="text" name="area">
        </form>
        </p>
 
        <p>Click on the button to hide the input with
            the name 'area'</p>
 
        <button onclick="selectByName()">
            Click to hide the area input
        </button>
        <script src=
        </script>
        <script type="text/javascript">
            function selectByName() {
                element = $('[name="area"]');
 
                //hide the element
                element.hide();
            }
        </script>
    </center>
</body>
 
</html>


Output:

name selector Method

Using JavaScript to get the element by name and pass it on to jQuery

The JavaScript getElementsByName() method can be used to select the required element and this can be passed to a jQuery function to use it further as a jQuery object.

Syntax:

selector = document.getElementsByName('nameOfElement');
element = $(selector);

Example: This example illustrates the use of the getElementsByName() method to get the collection of all elements of a particular document by name

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
      How to select an element by name with jQuery?
      </title>
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>How to select an element by name with jQuery?</b>
        <p>
            The textbox below has the
              <b>name attribute 'address'.</b>
        <form>
            <textarea rows="4" cols="40" name="address"></textarea>
        </form>
        </p>
 
        <p>
            The textbox below has the
              <b>name attribute 'area'.</b>
        <form>
            <input type="text" name="area">
        </form>
        </p>
 
        <p>
          Click on the button to hide the
          input with the name 'address'
         </p>
 
        <button onclick="selectByName()">
            Click to hide the address input
        </button>
        <script src=
        </script>
        <script type="text/javascript">
            function selectByName() {
                selector = document.getElementsByName('address');
                element = $(selector);
 
                // hide the element
                element.hide();
            }
        </script>
    </center>
</body>
 
</html>


Output:

Getting the element by their name

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”. Please refer to the jQuery Tutorial and jQuery Examples article for further details.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads