This is a dumb question, but im stuck. Why does my first one work but not the other 3. From reading the docs, all 4 should do the job. I want to in a bigger use case get an element of a form, there could be other elements on the same page with same name inside other forms or in other divs, so the 4th option is what I really want to work. But I cant figure out why all these dont work.

/

html:

 <form id="filter_form_id" name="filter_form" method="get" action="/retrieved_data_records">

 <select id="brand_id" name="brands">
 <option value="0"></option>
 <option value="143272526">Brand1</option>
 <option selected="selected" value="269998788">Brand2</option>
 <option value="330516076">Brand3</option>
 <option value="330516077">Brand4</option>

 </select>
</form>

js:

 alert ("The val: " +  $('#brand_id').val() );    
 alert ("The val: " +  $('brands').val() );  
 alert ("The val: " +  $('#filter_form_id brands').val() );  
 alert ("The val: " +  $('#filter_form_id > brands').val() );  

This is a dumb question, but im stuck. Why does my first one work but not the other 3. From reading the docs, all 4 should do the job. I want to in a bigger use case get an element of a form, there could be other elements on the same page with same name inside other forms or in other divs, so the 4th option is what I really want to work. But I cant figure out why all these dont work.

http://jsfiddle/7vF5z/1/

html:

 <form id="filter_form_id" name="filter_form" method="get" action="/retrieved_data_records">

 <select id="brand_id" name="brands">
 <option value="0"></option>
 <option value="143272526">Brand1</option>
 <option selected="selected" value="269998788">Brand2</option>
 <option value="330516076">Brand3</option>
 <option value="330516077">Brand4</option>

 </select>
</form>

js:

 alert ("The val: " +  $('#brand_id').val() );    
 alert ("The val: " +  $('brands').val() );  
 alert ("The val: " +  $('#filter_form_id brands').val() );  
 alert ("The val: " +  $('#filter_form_id > brands').val() );  

• javascript
• jquery

• Is the 4th form supposed to be a child selector? – JMM Commented Apr 18, 2012 at 13:02
• 1 From reading the docs which docs are you reading? o_O – Andreas Wong Commented Apr 18, 2012 at 13:02

4 Answers 4

Where are you getting these selectors from?

1. $('brands').val() is looking for elements whose nodeName is brands (none of them). To check the name attribute use $('[name="brands"]').val()
2. $('#filter_form_id brands') is looking for elements whose nodeName is brands (none of them) which are descendants of an element whose ID is filter_form_id (definitely none of them).
3. $('#filter_form_id => brands') is pletely invalid. If you want the child selector you want $('#filter_form_id > brands')

For more plete documentation check the jQuery documentation for available selectors.

Your selectors use brands as if it's an element name. You need to use an attribute selector like [name="brands"].

Updated testcase: http://jsfiddle/7vF5z/3/

alert ("The val: " +  $('#brand_id').val() );    
alert ("The val: " +  $('[name="brands"]').val() );  
alert ("The val: " +  $('#filter_form_id [name="brands"]').val() );  
alert ("The val: " +  $('#filter_form_id > [name="brands"]').val() );  

the 4th option is what I really want to work

If that's supposed to be a child selector, then you need to correct it by:

• Using the correct child selector syntax
• Using an attribute selector, as in my example.

There's no real reason to use a child selector there, unless you're going to have multiple controls with that same name value in that same form.

Because with plain string like brands, jQuery will look for a tag with that name. And brands is not a tag. What you can do otherwise is, $('select[name="brands"]').val()

// OK
alert ("The val: " +  $('#brand_id').val() );
// there is no tag <brands />
alert ("The val: " +  $('brands').val() );  
// there is still no tag <brands />
alert ("The val: " +  $('#filter_form_id brands').val() );
// KO, doesn't mean anything
alert ("The val: " +  $('#filter_form_id => brands').val() );