How to select an element by name with jQuery ?

24 Nov, 2021
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="https://code.jquery.com/jquery-3.3.1.min.js">        </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="https://code.jquery.com/jquery-3.3.1.min.js">        </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.
bhaskargeeksforgeeks
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?