Accessing form elements by name with jquery

I have a table column I’m trying lớn expvà & hide. jQuery seems khổng lồ hide the elements when I select it by class but not by the element’s name.

Bạn đang xem: Accessing form elements by name with jquery

For example:

$(".bold").hide(); // Selecting by class works. $("tcol1").hide(); // Selecting by name does not work.

chú ý the HTML below. The second column has the same name for all rows. How could I create this collection using the name attribute?

data1 data2 data1 data2 data1 data2
javascript jquery html dom jquery-selectors
Share
Improve this question
Follow
edited Mar 18 at 11:19
Sebastian Sitháng
13.8k 6 6 gold badges 42 42 silver badges 59 59 bronze badges
asked Jul 10 "09 at 1:05
T.T.T.T.T.T.
29.3k 45 45 gold badges 120 120 silver badges 161 161 bronze badges
3
7
Question does not match content. ID & name are different attributes & are selected differently – Mark W Aug 22 "11 at 13:08
12
It's against W3C standards to lớn have elements with the same ID; i.e. duplicate IDs are a no no. – Steve sầu Tauber Feb 17 "13 at 1:28
The CSS specification includes a new column combinator, so soon you can simply select document.querySelectorAll("td || col.secondColumn") if you have sầu a . – Sebastian Sitháng Mar 18 at 11:31
Add a phản hồi  | 

14 Answers 14


Active sầu Oldest Votes
2359

You can use the jQuery attribute selector:

$("td") // Matches exactly "tcol1" $("td" ) // Matches those that begin with "tcol" $("td" ) // Matches those that end with "tcol" $("td" ) // Matches those that contain "tcol"
Share
Improve this answer
Follow
edited Mar 18 at 11:21
Sebastian Simon
13.8k 6 6 gold badges 42 42 silver badges 59 59 bronze badges
answered Jul 10 "09 at 1:21
Jon EricksonJon Erickson
102k 41 41 gold badges 131 131 silver badges 170 170 bronze badges
1
29
Varun - you can just omit the td... for example $('') will match all elements that have sầu an attribute 'name' with a value that starts with 'tcol' – Jon Erickson Jul 9 "12 at 6:36
Add a bình luận  | 
260

Any attribute can be selected using way. See the sample here:

var value = $("");
Share
Improve sầu this answer
Follow
edited Dec 23 "14 at 18:57
matpie
15.5k 9 9 gold badges 56 56 silver badges 80 80 bronze badges
answered Sep 22 "13 at 19:07
user2804791user2804791
2,609 1 1 gold badge 9 9 silver badges 2 2 bronze badges
0
Add a phản hồi  | 
68

If you have something like:

You can read all like this:

jQuery("input").each(function() );

The snippet:


jQuery("input").each(function() ); <đầu vào type="checkbox" name="mycheckbox" value="11" checked="">
Share
Improve sầu this answer
Follow
edited Aug 7 "16 at 20:02
Al Foиce ѫ
3,834 10 10 gold badges 34 34 silver badges 45 45 bronze badges
answered Jul 9 "14 at 18:34
Andreas L.Andreas L.
2,290 18 18 silver badges 22 22 bronze badges
Add a bình luận  | 
27

You could get the array of elements by name the old fashioned way và pass that array lớn jQuery.


function toggleByName() sandBox
<đầu vào type="radio" name="chName"/>
<đầu vào type="radio" name="chName"/>
<đầu vào type="radio" name="chName"/>

note: the only time you would have sầu a reason to lớn use the "name" attribute should be for checkbox or radio inputs.

Or you could just add another class khổng lồ the elements for selection.(This is what I would do)


function toggleByClass(bolShow) else } sandBox

data1 data2
data1 data2
data1 data2
<đầu vào type="button" onclick="toggleByClass(true);" value="show"/> <đầu vào type="button" onclick="toggleByClass(false);" value="hide"/>
Share
Improve this answer
Follow
edited Aug 7 "16 at 19:52
Al Foиce ѫ
3,834 10 10 gold badges 34 34 silver badges 45 45 bronze badges
answered Jul 11 "09 at 5:25
Your Frikết thúc KenYour Friend Ken
7,589 2 2 gold badges 21 21 silver badges 34 34 bronze badges
0
Add a comment  | 
25

You can get the name value from an input đầu vào field using name element in jQuery by:


var firstname = jQuery("#form1 input").val(); //Returns ABCD var lastname = jQuery("#form1 input").val(); //Returns XYZ console.log(firstname); console.log(lastname);
Share
Improve sầu this answer
Follow
edited Aug 7 "16 at 20:08
Al Foиce ѫ
3,834 10 10 gold badges 34 34 silver badges 45 45 bronze badges
answered Jun 15 "15 at 5:52
Shrikant DShrikant D
687 1 1 gold badge 7 7 silver badges 14 14 bronze badges
0
Add a phản hồi  | 
18

Frameworks usually use bracket names in forms, like:

<đầu vào name=user />

They can be accessed by:

// in JS: this.querySelectorAll("">") // in jQuery: $("">") // or by mask with escaped quotes: this.querySelectorAll("">")
Share
Improve sầu this answer
Follow
edited Oct 16 "15 at 16:32
answered Oct 16 "15 at 16:27
itsnikolayitsnikolay
15k 3 3 gold badges 56 56 silver badges 60 60 bronze badges
Add a comment  | 
13

I"ve done like this & it works:

$("")

https://api.jquery.com/attribute-equals-selector/


Share
Improve sầu this answer
Follow
edited Mar 25 "15 at 21:22
Paweł Tomkiel
1,848 2 2 gold badges 19 19 silver badges 38 38 bronze badges
answered Mar 25 "15 at 20:27
ksciuskscius
336 9 9 silver badges 13 13 bronze badges
0
Add a comment  | 
6

You forgot the second set of quotes, which makes the accepted answer incorrect:

$("td")
Share
Improve this answer
Follow
answered Nov 20 "17 at 19:27
Chris JChris J
351 3 3 silver badges 11 11 bronze badges
2
for example if the field name is 'td">' – relytmcd Jun 13 "18 at 23:57
This is very true. Newer versions of jQuery (v. 3.2.1) are much more likely to fail when encountering a attribute-based selector element without proper quoting. – HoldOffHunger Jun 27 "18 at 18:03
Add a bình luận  | 
5

You can get the element in JQuery by using its ID attribute lượt thích this:

$("#tcol1").hide();
Share
Improve this answer
Follow
answered Jul 10 "09 at 1:09
CalebHCCalebHC
4,866 3 3 gold badges 33 33 silver badges 40 40 bronze badges
0
Add a phản hồi  | 
5

Here"s a simple solution: $("td")


Share
Improve this answer
Follow
edited Aquảng cáo 27 "16 at 19:26
Barry Michael Doyle
6,200 17 17 gold badges 62 62 silver badges 108 108 bronze badges
answered Atruyền thông quảng cáo 27 "16 at 18:47
GuestGuest
51 1 1 silver badge 1 1 bronze badge
Add a bình luận  | 
3

You can use any attribute as selector with .

$("td").hide();
Share
Improve sầu this answer
Follow
answered Mar 31 "16 at 12:51
user6139189user6139189
Add a phản hồi  | 
2

Personally, what I"ve sầu done in the past is give them a common class id & used that khổng lồ select them. It may not be ikhuyến mãi as they have sầu a class specified that may not exist, but it makes the selection a hell of a lot easier. Just make sure you"re quality in your classnames.

Xem thêm: " Ung Thư Tiếng Anh Là Gì ? Định Nghĩa Của Từ Ung Thư Trong Từ Điển Lạc Việt

i.e. for the example above I"d use your selection by class. Better still would be khổng lồ change the class name from bold to lớn "tcol1", so you don"t get any accidental inclusions into lớn the jQuery results. If bold does actually refer to lớn a CSS class, you can always specify both in the class property - i.e. "class="tcol1 bold"".

In summary, if you can"t select by Name, either use a complicated jQuery selector và accept any related performance hit or use Class selectors.

You can always limit the jQuery scope by including the table name i.e. $("#tableID > .bold")

That should restrict jQuery from searching the "world".

Its could still be classed as a complicated selector, but it quickly constrains any searching khổng lồ within the table with the ID of "#tableID", so keeps the processing to a minimum.

An alternative of this if you"re looking for more than 1 element within #table1 would be khổng lồ look this up separately & then pass it lớn jQuery as this limits the scope, but saves a bit of processing lớn look it up each time.

var tbl = $("#tableID"); var boldElements = $(".bold",tbl); var rows = $("tr",tbl); if (rows.length)