Skip to content
Related Articles

Related Articles

How to select an element by name with jQuery ?

Improve Article
Save Article
  • Last Updated : 24 Nov, 2021
Improve Article
Save Article

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 2 methods:

  • By using the name selector method
  • By using JavaScript to get the element by name and passing it on to jQuery

We will understand both methods with the help of examples.

Method 1: 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 the 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

Method 2: 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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!