targetting f.select rails form helper with javascript

Question

I'm trying to retrieve the value of a f.select form helper in my rails application.

The code for the f.select is (in HAML):

= f.select :level, [["L1 - Super easy", 1], ["L2 - Warm-up", 2], ["L3 - Easy exam questions", 3], ["L4 - Moderate exam questions", 4], ["L5 - Difficult exam questions", 5]], id: "level-AS"

which results in the following html:

<select id="test_level" name="test[level]">

    <option value="1" selected="selected">L1 - Super easy</option>
    <option value="2">L2 - Warm-up</option>
    <option value="3">L3 - Easy exam questions</option>
    <option value="4">L4 - Moderate exam questions</option>
    <option value="5">L5 - Difficult exam questions</option>

</select>

The f.select has an id of "level-AS" and I have managed to target it using

$('#level-AS').select()

and that gives me Object { context: HTMLDocument → new, selector: "#level-AS" } but what I want is for it to return the actual value that has been selected, i.e. "Easy" or "Hard".

I also tried

$('#level-AS').select().val()

and I have also tried

$('#level-AS').val()

but this returns undefined....

The resulting html (which the javascript works on) has an id of "test_level", not "level-AS". Once you are selecting the right element then $('#<elementID>').val() will give you the currently selected value. (substitute <elementID> for the id of the element you want to get). — Max Williams
– Max Williams, Commented May 6, 2015 at 9:48

apneadiving · Accepted Answer · 2015-05-06 11:10:40Z

4

You should simply do:

$('#level-AS').val()

Or according to your html:

$('#test_level').val()

Sidenote, instead of targeting by id, you could do:

$('select[name="test[level]"]').val()

edited May 6, 2015 at 11:10

answered May 6, 2015 at 8:08

apneadiving

116k26 gold badges225 silver badges215 bronze badges

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

7 Comments

camillavk Over a year ago

that still gives me undefined...I've edited it to include the code for the form_helper I am trying to target

apneadiving Over a year ago

and what if you do: $('#level-A2').val() ? seems you have a typo

camillavk Over a year ago

Sorry that was from a different page...I've corrected the edit now

apneadiving Over a year ago

well, the js way to retrieve the value is what we suggest you, cant tell much more... whats the resulting html?

camillavk Over a year ago

I know, which is why I'm so confused as well...I've edited it again to include the html

|

Max Williams · Accepted Answer · 2015-05-06 09:52:08Z

1

I think your problem is that the ID in your f.select is getting lost. I think it's due to how rails is splitting up the arguments into the various sections. Try this:

= f.select :level, [["L1 - Super easy", 1], ["L2 - Warm-up", 2], ["L3 - Easy exam questions", 3], ["L4 - Moderate exam questions", 4], ["L5 - Difficult exam questions", 5]], {}, {id: "level-AS"}

answered May 6, 2015 at 9:52

Max Williams

33k34 gold badges137 silver badges205 bronze badges

2 Comments

camillavk Over a year ago

thanks, I couldn't figure out why the id that I wanted wasn't correctly showing up in the html...

Max Williams Over a year ago

The documentation is quite unclear, but the arguments to f.select are field, options to use in the select, hash of special options for the select helper, hash of general other options If you don't wrap the last two in curly braces it thinks all the passed options are part of the third argument. It's an example where ruby's optional braces kind of screw you over if you don't use them.

Sarwan Kumar · Accepted Answer · 2015-05-06 08:15:27Z

0

You can call val() method to get value.

$('#level-AS').val()

answered May 6, 2015 at 8:15

Sarwan Kumar

1,33111 silver badges25 bronze badges

1 Comment

camillavk Over a year ago

that gives me undefined still...I have included the code for the form_helper I am trying to target...

Collectives™ on Stack Overflow

targetting f.select rails form helper with javascript

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related