jQuery selector of name attribute for different element types

Question

I have a table of rows. In one of the columns, some rows have a span with static text, some rows have a select with values to choose from. All elements in that one column have the same name attribute. In my form submit, I iterate thru the rows and want to get the values for all columns. I would prefer to have one jQuery selector statement to get the value from that element (span or select with name attribute of "materialValue"). How would I do that with jQuery? Here follows the html snippet.

<table>
  <tr><td>
      <span id="materialValue1" name="materialValue>ONE</span>
  </td></tr>
  <tr><td>
      <span id="materialValue2" name="materialValue>TWO</span>
  </td></tr>
  <tr><td>
      <select id="materialValue3" name="materialValue>
        <option>ONE</option>
        <option>TWO</option>
        <option>THREE</option>
      </select>
  </td></tr>
  <tr><td>
      <select id="materialValue4" name="materialValue>
        <option>ONE</option>
        <option>TWO</option>
        <option>THREE</option>
      </select>
  </td></tr>
</table>

Edit: I'm used to specifying the element type then square brackets with the attribute name/value. I'm not sure how to specify the jquery selector without the element type name. e.g. $('span[name="materialValue"]', this). Is it legal to specify $('[name="materialValue"]', this)? looks weird to me.

using same name attribute is invalid markup. either use name = whatever[] — xkeshav
– xkeshav, Commented Jul 10, 2012 at 18:29
@diEcho, why would using the same name on multiple elements be invalid? Thats how check boxes and radio buttons work in the first place. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 10, 2012 at 18:30
there are different element span div select with same name. 'checkbox' 'radio` have diffrent property — xkeshav
– xkeshav, Commented Jul 10, 2012 at 18:32

Austin · Accepted Answer · 2012-07-10 18:28:06Z

7

All you need is an attribute selector:

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

Also, you are missing closing quotes after your attribute name in your html

Look here for reference: http://api.jquery.com/attribute-equals-selector/

answered Jul 10, 2012 at 18:28

Austin

6,0542 gold badges26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

To answer the question edit: it looks weird, but it's perfectly fine. In fact, it's just like how you already use #id or .class without a type or * selector in your everyday code.

Austin Over a year ago

Thanks for the clarification, I just wasn't sure on how it would work with an attribute selector. Learn something new everyday...

Split Your Infinity · Accepted Answer · 2012-07-10 18:28:04Z

4

Like this...

$("[name=materialValue]")    // Select element with name attribute with a specific value

Attributes are selected using brackets. You can also use it like this in other cases...

$("div[id]")      // Select element with an id attribute

$("[name*=test]") // Select all elements with *test* in the name attribute (partial)

etc..

answered Jul 10, 2012 at 18:28

Split Your Infinity

4,2391 gold badge23 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery selector of name attribute for different element types

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related