Form helper: Linking radio button to label

rubyonrails-talk
#1

My form essentially looks like this:

<%= form_for :xxx, url: xxxs_path, method: 'get', enforce_utf8:true do

d> %>

  <%= d.text_field('filter', value: @filter, maxlength:64, size:16) %>
  <%= d.radio_button(:filtertype, 'regexp') %>
  <%= d.label :filtertype_regexp, 'Regular Expression', value: 'regexp'
%>
  <%= d.radio_button(:filtertype, 'lefteq', checked:true) %>
  <%= d.label :filtertype_lefteq, 'Starts with...', value: 'lefteq' %>
  <%= d.submit(value="FILTER LIST BELOW", name: 'filter') %>
<% end %>

I thought from this association between radio buttons and label,
clicking on *text* (i.e. 'Regular Expression' should already cause the
button to be selected, but this is not the case. Did I miss something
here?

#2

My form essentially looks like this:

<%= form_for :xxx, url: xxxs_path, method: 'get', enforce_utf8:true do
>d> %>
<%= d.text_field('filter', value: @filter, maxlength:64, size:16) %>
<%= d.radio_button(:filtertype, 'regexp') %>
<%= d.label :filtertype_regexp, 'Regular Expression', value: 'regexp'
%>
<%= d.radio_button(:filtertype, 'lefteq', checked:true) %>
<%= d.label :filtertype_lefteq, 'Starts with...', value: 'lefteq' %>
<%= d.submit(value="FILTER LIST BELOW", name: 'filter') %>
<% end %>

I thought from this association between radio buttons and label,
clicking on *text* (i.e. 'Regular Expression' should already cause the
button to be selected, but this is not the case. Did I miss something
here?

Look at the generated HTML in a browser. In order for the label to affect the radio button, one of two things must be true:

1. Either the label's "for" attribute exactly matches the radio button's "id" attribute, or
2. The label wraps around the button and does not have a "for" attribute.

Sometimes you have to get out and push a little with radio buttons, although looking at it briefly, you appear to be doing the right things by having the same name input into both the label and the radio.

Walter

#3

Walter Davis wrote in post #1148961:

Look at the generated HTML in a browser. In order for the label to
affect the radio button, one of two things must be true:

1. Either the label's "for" attribute exactly matches the radio button's
"id" attribute, or

Got it! I now can see my mistake. The label should be

   <%= d.label :filtertype_lefteq, 'Starts with...', value: 'lefteq' %>

2. The label wraps around the button and does not have a "for"
attribute.

Just out of curiosity: How can *that* be done inside an ERB file?

Ronald

#4

Walter Davis wrote in post #1148961:

Look at the generated HTML in a browser. In order for the label to
affect the radio button, one of two things must be true:

1. Either the label's "for" attribute exactly matches the radio button's
"id" attribute, or

Got it! I now can see my mistake. The label should be

  <%= d.label :filtertype_lefteq, 'Starts with...', value: 'lefteq' %>

2. The label wraps around the button and does not have a "for"
attribute.

Just out of curiosity: How can *that* be done inside an ERB file?

<%= f.label :your_element do %>
<%= f.check_box :your_element %>
The label text for your element
<%- end %>

That creates a wrapped label. I use this all the time, particularly when making a Bootstrap layout.

Walter