Have radio button's label make selection too?

Question

According to (somewhat official) this guide, I can make a radio button's label make the selection for that radio button too. They say,

Always use labels for each checkbox and radio button. They associate text with a specific option and provide a larger clickable region.

Unfortunately, I have not been able to get this functionality for my form. Here is my code:

<% form_for(@bet) do |f| %>
  <%= f.label :bet_type %>
  <%= f.radio_button :bet_type, "moneyline" %>
  <%= f.label :bet_type_moneyline, "Moneyline" %>
  <%= f.radio_button :bet_type, "spread" %>
  <%= f.label :bet_type_spread, "Spread" %>
<% end %>

I've also tried this (because this is the example's way using FormTagHelper instead of FormHelper):

<% form_for(@bet) do |f| %>
  <%= radio_button_tag :bet_type, "moneyline" %>
  <%= label_tag :bet_type_moneyline, "Moneyline" %>
  <%= radio_button_tag :bet_type, "spread" %>
  <%= label_tag :bet_type_spread, "Spread" %>
<% end %>

But, I still cannot get it to work. I'm using rails 2.3.5 and ruby 1.8.7.

Thanks for reading, and maybe helping!

Answer 1

Woops! Sorry all. I found the error in a bit of a disingenuous way.

I wrote the code of this post by hand...no copy-paste. To keep things clear, I renamed some of values I used because the code I was running was a bit messy (AND apparently incorrect).

So, when Gaby asked me to get some output for these code chunks, I stuck them in my view and voila! Labels that select their respective radio buttons! But why?!

Well, here's the thing. Looking at the ouput, I realized that my original code had not been generating consistent input.id and label.for values in the html. It looked something like this:

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :moneyline, "Moneyline" %>

This generated:

 <input id="bet_type_moneyline" name="bet_type type="radio" value="moneyline" />
 <label for="moneyline">Moneyline</label>

See how input.id and label.for are different?

And only when I ran the code in my question did I get this right.

It seems to work like this: the radio button tag method makes input.id from it's (object_name + "_" + value) and the label tag method makes label.for from it's object_name. And when those two equal, you get a selecting label.

I hope this discovery can help someone else out along the line.

Sorry to get your gears grinding for nothing too!

Answer 2

An easy way to do this for radio buttons is to place the input tag inside the label, like so:

<label>
  <input />
  This is an input!
</label>

This is a valid way of accomplishing your goal, though tough in Rails. I've often wished for the label helper to accept a block, so you could do:

<%= f.label :moneyline, "Moneyline" do %>
  <%= f.radio_button :bet_type, "moneyline" %>
<% end %>

but as far as I know this isn't possible.

Answer 3

Not knowing rails at all, the HTML requirements are easy: You must construct your tags like this:

<input id="bet_type_moneyline" name="bet_type" type="radio" value="moneyline">
<label for="bet_type_moneyline">Moneyline</label>

So, first of all, check your HTML, in your example, you had missing quotes in ...name="bet_type type="radio"...

Secondly, the for="" always points at the id of the field.

Now you got a clickable label for the field bet_type!

Hope it helps!