How to select an element by name with jQuery

By: Rajesh P.S.

In jQuery, the selection of any specific element attribute is accomplished through the application of the [attribute_name=value] construct. This attribute-based selection mechanism empowers developers to precisely identify and manipulate elements based on specific attribute-value pairs. By utilizing this approach, developers are enabled to efficiently target and interact with elements that possess distinct attributes, enriching the precision and effectiveness of their code implementations.

$("[name='nameofobject']");

It is a mandatory requirement to include quotes around the value.

Example

$( "input[name='myTxt']" ).css("background-color", "red");

Continue Reading...

Browser View

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnSubmit").click(function(){ $( "input[name='myTxt']" ).css("background-color", "red"); }); }); </script> </head> <body> <input type="text" name="myTxt" value="" /><br><br> <input id = "btnSubmit" type="submit" value="Click this button to change Back Color"/> </body> </html>

Also, you can use the jQuery attribute selector:

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

Multiple selction by attribute

You can select multiple element attribute by its name.

$( "input[name*='myTxt-']" ).css("background-color", "blue");

Browser View

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnSubmit").click(function(){ $( "input[name*='myTxt-']" ).css("background-color", "blue"); }); }); </script> </head> <body> <input name="myTxt-1"><br> <input name="myTxt-2"><br> <input name="myTxt-3"><br> <input name="text-4"><br> <input id = "btnSubmit" type="submit" value="Click this button to change Back Color"/> </body> </html>

Using JavaScript

In JavaScript, the process of selecting an element's attribute can be achieved through the utilization of the getElementsByName() method. This method facilitates the retrieval of elements bearing a particular attribute name, presenting a straightforward approach to access and manipulate specific attributes within the context of web development.

<input name="myTxt"> var txts = document.getElementsByName("myTxt");

Browser View

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script> function setValue() { var txts = document.getElementsByName("myTxt"); for (var tx of txts) { tx.style.backgroundColor = "yellow"; } } </script> </head> <body> <input name="myTxt"><br> <input name="myTxt"><br> <input name="myTxt"><br> <input name="text-4"><br> <button type="button" id="btn" onclick="setValue()">Set Color</button> </body> </html>

jQuery element Selector

The jQuery element selector selects elements based on the element name.

You can select all ‹input› elements on a page like this:

$("input")

Example

When a user clicks on a button, all ‹input› elements will be hidden:

<input> $("input").hide();

jQuery #id Selector

The jQuery #id selector employs the unique id attribute assigned to an HTML tag to precisely locate and identify a specific element within the DOM structure. This selector serves as an efficient means to singularly target elements based on their distinctive identifiers, enhancing the accuracy and efficiency of element manipulation.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

Example

<input id="test"> $("#test")

jQuery .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

Example

<input class="test"> $(".test")

Conclusion

By specifying the attribute [name="username"], you can precisely target elements based on their name attribute using jQuery. This technique is particularly useful for form elements and other elements that require identification via the name attribute.

Next > How to get the data-id attribute using jQuery

Related Topics

More Related Topics.....