How can I select an element by name with jQuery?

Question

I have a table column I’m trying to expand and hide. jQuery seems to hide the <td> elements when I select it by class but not by the element’s name.

For example:

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

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

<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>

Question does not match content. ID and name are different attributes and are selected differently — Mark W, Commented Aug 22, 2011 at 13:08
It's against W3C standards to have elements with the same ID; i.e. duplicate IDs are a no no. — Steve Tauber, Commented Feb 17, 2013 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 a <colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>. — Sebastian Simon, Commented Mar 18, 2021 at 11:31

Sebastian Simon · Accepted Answer · 2021-03-18 11:21:37Z

2763

You can use the jQuery attribute selector:

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

edited Mar 18, 2021 at 11:21

Sebastian Simon

19.5k8 gold badges60 silver badges84 bronze badges

answered Jul 10, 2009 at 1:21

Jon Erickson

115k45 gold badges139 silver badges177 bronze badges

45

@Varun - you can just omit the td... for example $('[name^=tcol]') will match all elements that have an attribute 'name' with a value that starts with 'tcol'
– Jon Erickson
Commented Jul 9, 2012 at 6:36
[name="fk_item_id[${clone_id}]"] did the magic
– Mohamed Raza
Commented Jun 2, 2023 at 15:08

Add a comment |

matpie · Accepted Answer · 2014-12-23 18:57:43Z

340

Any attribute can be selected using [attribute_name=value] way. See the sample here:

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

edited Dec 23, 2014 at 18:57

matpie

17.5k10 gold badges63 silver badges84 bronze badges

answered Sep 22, 2013 at 19:07

user2804791

3,4091 gold badge13 silver badges2 bronze badges

Add a comment |

Al Foиce ѫ · Accepted Answer · 2016-08-07 20:02:31Z

If you have something like:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

You can read all like this:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

The snippet:

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Al Foиce ѫ · Accepted Answer · 2016-08-07 19:52:57Z

You could get the array of elements by name the old fashioned way and pass that array to jQuery.

function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>

note: the only time you would have a reason to use the "name" attribute should be for checkbox or radio inputs.

Or you could just add another class to the elements for selection.(This is what I would do)

function toggleByClass(bolShow) {
  if (bolShow) {
    $(".rowToToggle").show();
  } else {
    $(".rowToToggle").hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <table>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
    </table>
    <input type="button" onclick="toggleByClass(true);" value="show"/>
    <input type="button" onclick="toggleByClass(false);" value="hide"/>
  </body>
</html>

Al Foиce ѫ · Accepted Answer · 2016-08-07 20:08:22Z

32

You can get the name value from an input field using name element in jQuery by:

var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ 
console.log(firstname);
console.log(lastname);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
  <input type="text" name="firstname" value="ABCD"/>
  <input type="text" name="lastname" value="XYZ"/>
</form>

edited Aug 7, 2016 at 20:08

Al Foиce ѫ

4,29512 gold badges42 silver badges50 bronze badges

answered Jun 15, 2015 at 5:52

Shrikant D

8371 gold badge8 silver badges14 bronze badges

Add a comment |

nikolayp · Accepted Answer · 2015-10-16 16:32:17Z

22

Frameworks usually use bracket names in forms, like:

<input name=user[first_name] />

They can be accessed by:

// in JS:
this.querySelectorAll('[name="user[first_name]"]')

// in jQuery:
$('[name="user[first_name]"]')

// or by mask with escaped quotes:
this.querySelectorAll("[name*=\"[first_name]\"]")

edited Oct 16, 2015 at 16:32

answered Oct 16, 2015 at 16:27

nikolayp

17.9k4 gold badges69 silver badges67 bronze badges

Add a comment |

Paweł Tomkiel · Accepted Answer · 2015-03-25 21:22:01Z

17

I've done like this and it works:

$('[name="tcol1"]')

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

edited Mar 25, 2015 at 21:22

Paweł Tomkiel

1,9842 gold badges21 silver badges39 bronze badges

answered Mar 25, 2015 at 20:27

kscius

3869 silver badges13 bronze badges

Add a comment |

Chris J · Accepted Answer · 2017-11-20 19:27:54Z

11

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

$('td[name="tcol1"]')

answered Nov 20, 2017 at 19:27

Chris J

6251 gold badge9 silver badges15 bronze badges

for example if the field name is 'td[name="nested[fieldName]"]'
– relytmcd
Commented Jun 13, 2018 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
Commented Jun 27, 2018 at 18:03

Add a comment |

user6139189user6139189 · Accepted Answer · 2016-03-31 12:51:10Z

5

You can use any attribute as selector with [attribute_name=value].

$('td[name=tcol1]').hide();

answered Mar 31, 2016 at 12:51

user6139189

Add a comment |

Barry Michael Doyle · Accepted Answer · 2016-04-27 19:26:37Z

5

Here's a simple solution: $('td[name=tcol1]')

edited Apr 27, 2016 at 19:26

Barry Michael Doyle

10.5k32 gold badges95 silver badges158 bronze badges

answered Apr 27, 2016 at 18:47

Guest

511 silver badge1 bronze badge

Add a comment |

Community · Accepted Answer · 2020-06-20 09:12:55Z

Performance

Today (2020.06.16) I perform tests for chosen solutions on MacOs High Sierra on Chrome 83.0, Safari 13.1.1 and Firefox 77.0.

Conclusions

Get elements by name

getElementByName (C) is fastest solution for all browsers for big and small arrays - however I is probably some kind of lazy-loading solution or It use some internal browser hash-cache with name-element pairs
mixed js-jquery solution (B) is faster than querySelectorAll (D) solution
pure jquery solution (A) is slowest

Get rows by name and hide them (we exclude precalculated native solution (I) - theoretically fastest) from comparison - it is used as reference)

surprisingly the mixed js-jquery solution (F) is fastest on all browsers
surprisingly the precalculated solution (I) is slower than jquery (E,F) solutions for big tables (!!!) - I check that .hide() jQuery method set style "default:none" on hidden elements - but it looks that they find faster way of do it than element.style.display='none'
jquery (E) solution is quite-fast on big tables
jquery (E) and querySelectorAll (H) solutions are slowest for small tables
getElementByName (G) and querySelectorAll (H) solutions are quite slow for big tables

Details

I perform two tests for read elements by name (A,B,C,D) and hide that elements (E,F,G,H,I)

small table - 3 rows - you can run test HERE
big table - 1000 rows - you can run test HERE

Snippet below presents used codes

//https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery#

// https://jsbench.me/o6kbhyyvib/1
// https://jsbench.me/2fkbi9rirv/1

function A() {
  return $('[name=tcol1]');
}

function B() {
  return $(document.getElementsByName("tcol1"))
}

function C() {
  return document.getElementsByName("tcol1")
}

function D() {
  return document.querySelectorAll('[name=tcol1]')
}

function E() {
  $('[name=tcol1]').hide();
}

function F() {
  $(document.getElementsByName("tcol1")).hide();
}

function G() {
  document.getElementsByName("tcol1").forEach(e=>e.style.display='none'); 
}

function H() {
  document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none'); 
}

function I() {
  let elArr = [...document.getElementsByName("tcol1")];
  let length = elArr.length
  for(let i=0; i<length; i++) elArr[i].style.display='none';
}




// -----------
// TEST
// -----------

function reset() { $('td[name=tcol1]').show(); } 

[A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>This snippet only presents used codes</div>
<table>
  <tr>    
      <td>data1</td>
      <td name="tcol1" class="bold"> data2</td>
  </tr>
  <tr>    
      <td>data1</td>
      <td name="tcol1" class="bold"> data2</td>
  </tr>  
  <tr>    
      <td>data1</td>
      <td name="tcol1" class="bold"> data2</td>
  </tr>
</table>

<button onclick="E()">E: hide</button>
<button onclick="F()">F: hide</button>
<button onclick="G()">G: hide</button>
<button onclick="H()">H: hide</button>
<button onclick="I()">I: hide</button><br>
<button onclick="reset()">reset</button>

Example results on Chrome

great info, but a lot of stuff that don't answer the question, it's just related knowledge — ericksho, Commented Mar 15, 2021 at 19:59

Aldo · Accepted Answer · 2023-03-29 18:00:04Z

2 more examples:

<input type="text" name="foo">
<input type="text" name="foo[bar]">

with:

$('[name="foo"]');
$('[name="foo\\[bar\\]"]');

snippet:

$('#copy').on('click', () => {
  let $from = $('[name="foo"]');
  let $to = $('#result-1');
  $to.val($from.val());

  $from = $('[name="foo\\[bar\\]"]');
  $to = $('#result-2');
  $to.val($from.val());
});

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

<p>
  <input type="text" name="foo" value="copy name='foo'">
  <input type="text" disabled id="result-1" placeholder="i'm disabled">
</p>
<p>
  <input type="text" name="foo[bar]" value="copy name='foo[bar]'">
  <input type="text" disabled id="result-2" placeholder="i'm disabled">
</p>

<input type="button" id="copy" value="copy values">

HoldOffHunger · Accepted Answer · 2018-06-27 18:01:38Z

Personally, what I've done in the past is give them a common class id and used that to select them. It may not be ideal as they have a class specified that may not exist, but it makes the selection a hell of a lot easier. Just make sure you're unique in your classnames.

i.e. for the example above I'd use your selection by class. Better still would be to change the class name from bold to 'tcol1', so you don't get any accidental inclusions into the jQuery results. If bold does actually refer to 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 and 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 to 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 to look this up separately and then pass it to jQuery as this limits the scope, but saves a bit of processing to look it up each time.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}

CalebHC · Accepted Answer · 2009-07-10 01:09:39Z

-7

You can get the element in JQuery by using its ID attribute like this:

$("#tcol1").hide();

answered Jul 10, 2009 at 1:09

CalebHC

5,0423 gold badges37 silver badges42 bronze badges

8

OP asked by name, not id
– dylanh724
Commented Aug 15, 2021 at 7:40
Why does this answer appear at the top?
– Marcus
Commented Feb 14, 2022 at 23:17
1

@Marcus because it's the most rad answer of them all.
– CalebHC
Commented Feb 16, 2022 at 0:17
@dylanh724 the question was originally about finding by name.
– CalebHC
Commented Feb 16, 2022 at 0:19
You didn't answer the question, please, refrain from adding unnecessary answers that are not what the user asked for.
– Arruda
Commented Oct 25, 2023 at 17:30

Add a comment |

mastisa · Accepted Answer · 2019-06-19 07:44:00Z

-25

You can use the function:

get.elementbyId();

edited Jun 19, 2019 at 7:44

mastisa

2,0233 gold badges24 silver badges42 bronze badges

answered Jun 19, 2019 at 7:08

Pratyush Goyal

31 silver badge11 bronze badges

5

OP wanted to get by name, not id. And what is get.elementbyId()? Did you mean document.getElementById()?
– barbsan
Commented Jun 19, 2019 at 7:39
10

No, he is asking to select an element by name.
– barbsan
Commented Jun 19, 2019 at 7:47

Add a comment |

Collectives™ on Stack Overflow

How can I select an element by name with jQuery?

15 Answers 15

Performance

Conclusions

Details

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
html
dom
jquery-selectors
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

Performance

Conclusions

Details

Not the answer you're looking for? Browse other questions tagged javascriptjqueryhtmldomjquery-selectors or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
html
dom
jquery-selectors
or ask your own question.