Skip to content
Related Articles

Related Articles

Improve Article

How to select an element by name with jQuery?

  • Last Updated : 03 Aug, 2021
Geek Week

An element can be selected by the name attribute using 2 methods:

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:






<!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:

  • Before clicking the button:
    selector-before
  • After clicking the button:
    selector-after

Method 2: Using JavaScript to get the element by name and passing it on to jQuery

The JavaScript method getElementsByName() 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:




<!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:

  • Before clicking the button:
    normal-js-before
  • After clicking the button:
    normal-js-after

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :