How to select an element by name with jQuery
Any jQuery element attribute can be selected using [attribute_name=value].
$("[name='nameofobject']");
It is a mandatory requirement to include quotes around the value.
Example
<input type="text" name="myTxt" value="" />
$( "input[name='myTxt']" ).css("background-color", "red");
Browser View
<!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-1">
<input name="myTxt-2">
<input name="myTxt-3">
$( "input[name*='myTxt-']" ).css("background-color", "blue");
Browser View
<!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, you can select element attribute by using getElementsByName().
<input name="myTxt">
var txts = document.getElementsByName("myTxt");
Browser View
<!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 uses the id attribute of an HTML tag to find the specific element.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")
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?