Forum: Ruby on Rails Form helper: Linking radio button to label

0fa73332c8e4a3b06ea439fd3f034322?d=identicon&s=25 Ronald Fischer (rovf)
on 2014-06-05 14:49
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?
A47e0a6beeb9d048ff054fc1c3a97418?d=identicon&s=25 Walter Davis (walterdavis)
on 2014-06-05 16:25
(Received via mailing list)
On Jun 5, 2014, at 8:49 AM, Ronald Fischer wrote:

>  <%= 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
0fa73332c8e4a3b06ea439fd3f034322?d=identicon&s=25 Ronald Fischer (rovf)
on 2014-06-09 12:35
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
A47e0a6beeb9d048ff054fc1c3a97418?d=identicon&s=25 Walter Davis (walterdavis)
on 2014-06-09 15:01
(Received via mailing list)
On Jun 9, 2014, at 6:35 AM, Ronald Fischer wrote:

>
>> 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
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.