How do I change the order of the input element that simple form generate?
Because the hidden checkbox does block for clicking the label.
My simple_form code:
<label>
<span>Company<b></b></span>
<%= f.check_box :company_is_true %>
</label>
The form simple form generate:
<label>
<span>Company<b>0</b></span>
<input type="hidden" value="0" name="search[company_is_true]">
<input type="checkbox" value="1" name="search[company_is_true]" id="search_company_is_true">
</label>
That I want to generate, that works when clicking on label:
<label>
<span>Company<b>0</b></span>
<input type="checkbox" value="1" name="search[company_is_true]" id="search_company_is_true">
<input type="hidden" value="0" name="search[company_is_true]">
</label>
I don't know how to add a comment to the list of comments, but in response to:
The user should be able to click on the label to check and uncheck the checkbox – Rails
beginner 1 hour ago
It's not the checkbox that prevents the user from clicking on that label, it's the lack of the for="" in
<label>
<span>Company<b></b></span>
<%= f.check_box :company_is_true %>
</label>
Either use <%= f.label %> as agmcleod mentioned, or add a for="" to the label:
<label for="search_company_is_true">
<span>Company<b></b></span>
<%= f.check_box :company_is_true %>
</label>
In a traditional html form, it should be structured something like this:
<label for="name">Name: </label>
<input type="text" name="name" />
The for attribute connects it to a field with either a name attribute or id attribute with that value you use in for. To do this in rails, use the following:
<%= f.label :company_is_true, 'Company' %>
<%= f.check_box :company_is_true %>
Related
Using Rails 4, Simple_Form and Bootstrap 3, I am trying to get my output HTML look like this to work with some front end styling:
<div class="checkbox">
<input value="0" type="hidden" name="member[remember_me]">
<label class="boolean optional" for="member_remember_me">
<input type="checkbox" value="">
<i class="input-helper"></i>
Keep me signed in
</label>
</div>
In my form, I have this:
<%= f.input :remember_me, class: 'checkbox inline', type: 'checkbox', as: :boolean if devise_mapping.rememberable? %>
And I cannot figure out how to get the image tag to show up inside the input field. What I get when the form is generated is this (missing the image tag):
<div class="checkbox">
<input value="0" type="hidden" name="member[remember_me]">
<label class="boolean optional" for="member_remember_me">
<input class="boolean optional" type="checkbox" value="1" name="member[remember_me]" id="member_remember_me">Remember me
</label>
</div>
I've tried this block that I thought should do it, but alas, no:
<%= f.input :remember_me, class: 'checkbox inline', type: 'checkbox', as: :boolean if devise_mapping.rememberable? do %>
<i class="input-helper"></i>
<% end %>
Any suggestions? Do I need to write a custom wrapper to get the image tag to show?
One option to put content inside any rails tag is to use
"#{image_tag('filename.png')}".html_safe
in place of the text, or using raw().
So I have a form with multiple inputs. for example:
<div class="grid_12">
<%= f.input :status, as: :radio_buttons, collection: [ 'available', 'pending', 'rented','coming soon','off-market'], checked: #base_address.status %>
<%= f.input :coop, as: :radio_buttons, collection: ['Cooperate with brokers','Keep in-house'], checked: #base_address.coop %>
</div>
What I'm doing is cloning a listing and I want the previously selected values to show up as selected on my form when I click clone. the first input for status works perfectly. status is a string. the second one, coop, does not come through. when I do an inspect in chrome I get this for the first one:
<input checked="checked" class="radio_buttons required" id="address_status_off-market" name="address[status]" required="required" type="radio" value="off-market">
but this for the second:
<input class="radio_buttons required" id="address_coop_cooperate_with_brokers" name="address[coop]" required="required" type="radio" value="Cooperate with brokers">
<input class="radio_buttons required" id="address_coop_keep_in-house" name="address[coop]" required="required" type="radio" value="Keep in-house">
not sure how one could work and not the other
I have a problem with the following code in the view:
<div class="btn-group" data-toggle="buttons">
<%= f.label :private, class: "btn btn-default" do %>
<%= f.check_box :private %> Private
<% end %>
</div>
Technically it works, but when the private field is initially true (i.e. checked) the button looks as if it was unchecked. Perhaps it is due the fact that check_box helper generates two inputs, one of which is hidden.
Could someone show an example implementation of Bootstrap checkboxes in the Rails view?
It turned out that Bootstrap scripts just do not update the state on page load. So I solved it with this JavaScript code snippet:
$("[data-toggle='buttons'] .btn").each(function(i, el) {
var $button = $(el);
var checked = $button.find("input[type='checkbox']").prop("checked");
if (checked) {
$button.addClass("active");
} else {
$button.removeClass("active");
}
});
Here is a working checkbox from one of my projects generated using Simple Form:
<%= f.input :cost, label: "Cost to access resource" %>
Which generates:
<div class="form-group boolean optional archive_resource_cost">
<input name="archive_resource[cost]" type="hidden" value="0" />
<label class="boolean optional checkbox" for="archive_resource_cost">
<input checked="checked" class="boolean optional" id="archive_resource_cost" name="archive_resource[cost]" type="checkbox" value="1" />
Cost to access resource
</label>
</div>
Is your :private model attribute definitely boolean?
I'm trying to make a simple form with this general structure:
o accept o decline
[submit]
when the radio button accept is checked and submit pressed, I want it to change the state of my model (called Offer here).
BUT when the button decline is checked, the form needs to change to something like this:
o accept x decline
Please enter reason here: [text box]
[submit]
Having entered a (mandatory) reason for declining and pressing submit, will change the state of the model Offer too, but differently.
I'm currently having problems getting the form to display the way I want. I'm using SimpleForm and tried something like this:
<%= simple_form_for #offer do |f| %>
<%= f.input accepts, as: :radio_buttons %>
<%= f.input :r_comment, as: :text, :label => 'Please enter reason here:' , :input_html => { :rows => 2, } %>
<%= f.button :submit %>
<% end %>
This of course doesn't work, because there is no "accepts" method or variable defined for offers (and it shouldn't be!). As for dynamically showing the input text box, I don't even have the slightest clue.
I'd be glad for any help you might offer,
Lordylike
UPDATE: HTML generated by simple_form
<div class="control-group radio_buttons optional">
<label class="radio_buttons optional control-label">Accept?</label>
<div class="controls">
<label class="radio">
<input class="radio_buttons optional" id="offer_accepts_decline" name="offer[accepts]" type="radio" value="Decline" />
Decline
</label>
<label class="radio">
<input class="radio_buttons optional" id="offer_accepts_accept" name="offer[accepts]" type="radio" value="Accept" />
Accept
</label>
</div>
UPDATE: HTML generated for comment box
<div class="control-group text optional">
<label class="text optional control-label" for="offer_r_comment">Reason for rejection:</label>
<div class="controls">
<textarea class="text optional" cols="40" id="offer_r_comment" name="offer[r_comment]" rows="2">
</textarea>
</div>
</div>
i'm not a fan of formtastic or simple_form but looking at the documentation, you should be able to do the following
# offer.rb
attr_accessor :accepts
# view
<%= f.input :accepts, as: :radio_buttons, collection: ['Decline', 'Accept'] %>
# js which can be placed inline or in the assets. let's use coffee
# you should also limit the selector below to include the class or the id of the
# radio buttons. I'm also not familiar with the html generated by simple form so
# the selectors to show and hide should also be changed.
$ ->
$(':radio').change ->
if $(this).prop('checked')
if $(this).val() == 'Accept'
$('#offer_r_comment').show()
else
$('#offer_r_comment').hide()
UPDATE: non coffee version. you can place this inside a script tag and just throw in the view.
$(document).ready(function() {
$(':radio').change(function() {
if ($(this).prop('checked'))
if ($(this).val() == 'Accept')
$('#offer_r_comment').show();
else
$('#offer_r_comment').hide();
});
});
I am working on the front-end part of a Rails 3.1 application. We are using a Twitter Bootstrap as CSS Framework, Devise as the authentication manager and the I18n gem for localization.
This is the devise syntax for a checkbox with its label
<%= f.label :remember_me %>
<%= f.check_box :remember_me %>
And this of course is the generated HTML
<label for="user_remember_me">Ricordati di me</label>
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
Since Bootstrap adds this rule for the labels display: block, the label and the checkbox are not in the same line. To have the on the same line I need an HTML output like this
<label for="user_remember_me">
Ricordati di me
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>
As shown in the forms markup documentation
You will have noticed that the label text is in Italian, the team member who provided localization for Devised worked hard to find out how to do so, and I do not want to force he to work on it again introducing new localized strings.
I am aware of the nice fact that the FormBuidler label method accepts a block as an argument so I could do
<% f.label :remeber_me do %>
<%= f.check_box :remember_me %>
<% end %>
But this produce an HTML output whitout the label! o.O
To be specific this is what I get:
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
I tried to look in the source code, the f.label method calls the label method, but I can only see that if there is a block no text will be printed and that the label and block will be rendered by the label_tag of the template_object.
Before diving into a source code digging, and a no sleep night, I decided to wait a moment and ask the lifesafer community of StackOverflow for help.
Am I missing something? I am calling f.label with block in the wrong way? Is some parameter missing?
Thanks!!
I don't know if you ever got this working...
Running on Rails 3.2.6 this is what I had to do:
<%= f.label :remember_me do %>
<%= f.check_box :remember_me %>
Remember Me?
<% end %>
I hope that helps you since I came here looking for an answer to the exact same problem and couldn't find it, except through trial and error.
If you want the label and checkbox on the same line, you must include .form-inline in your
<form class="form-inline">
<label for="user_remember_me">Ricordati di me</label>
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</form>
http://jsfiddle.net/baptme/66TJY/
<%= form_tag( :class => "form-inline") %>