I have been trying to figure out how to make simple form generate the correct code for a checkbox.
The code im trying to create is:
<div class="checkbox m-b-15">
<input value="0" type="hidden" name="group[open]">
<label>
<input class="boolean optional" type="checkbox" value="1" checked="checked" name="group[open]" id="group_open">
<i class="input-helper"></i>
Label text
</label>
</div>
So far im managed to generate
<div class="checkbox"><input value="0" type="hidden" name="group[open]">
<label class="boolean optional" for="group_open">
<input class="boolean optional" type="checkbox" value="1" checked="checked" name="group[open]" id="group_open">
Label text
</label>
</div>
With the following code
b.wrapper tag: :label do |ba|
ba.use :input
# <i class="input-helper"></i> tag should go here
ba.use :label_text
end
So how do I insert then i tag?
<i class="input-helper"></i>
Related
I’m using simple forms. The following line is what I have
=f.input :live_mode, as: :radio_buttons, label: false
which produces the following markup
<div class="form-group radio_buttons optional facility_live_mode"> .
<input type="hidden" name="facility[live_mode]" value="">
<label class="radio">
<label for="facility_live_mode_true">
<input class="radio_buttons optional" type="radio" value="true" name="facility[live_mode]" id="facility_live_mode_true">
Yes
</label>
</label>
<label class="radio">
<label for="facility_live_mode_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" checked="checked" name="facility[live_mode]" id="facility_live_mode_false">
No
</label>
</label>
</div>
The wrapper label is the result of setting config.item_wrapper_tag in simple_form.rb to :label which matches the markup of the custom theme I’m using.
What I want to achieve is this
<input type="hidden" name="facility[live_mode]" value="">
<label class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" value="true" name="facility[live_mode]" id="facility_live_mode_true">
<span class="custom-control-label">Yes</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" readonly="readonly" type="radio" value="false" checked="checked" name="facility[live_mode]" id="facility_live_mode_false">
<span class="custom-control-label">No</span>
</label>
but I have no idea how to go about doing this. Simple form config file provides a few options for customization but nothing that can produce the output that I need.
Is there something I can do to make this happen?
Bootstrap 4 introduces custom forms to customize checkboxes and radio buttons. Here is a way to generate the following templates with Simple Form?
Checkbox:
<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Check this custom checkbox
</label>
Radio:
<label class="c-input c-radio">
<input id="radio1" name="radio" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>
<label class="c-input c-radio">
<input id="radio2" name="radio" type="radio">
<span class="c-indicator"></span>
Or toggle this other custom radio
</label>
Thank you!
Just replace the input with form element:
<%= simple_form_for :foo do |f| %>
<label class="c-input c-checkbox">
<%= f.check_box :bar %>
<span class="c-indicator"></span>
Check this custom checkbox
</label>
<% end %>
Which will generate:
<label class="c-input c-checkbox">
<input name="foo[bar]" type="hidden" value="0">
<input type="checkbox" value="1" name="foo[bar]" id="foo_bar">
<span class="c-indicator"></span>
Check this custom checkbox
</label>
Check the bootply.
Same goes for your second example, just replace the elements with RoR's form elements.
I have form and inside I have radio button option , I have the controller class and the model. I can successfully save the other data but radio buttons options reflects to database as 0 always. I believe there is something wrong with thymeleaf radio button implementation.
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1"
value="true" th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2"
value="false" th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I found it , values should be 0 or 1 instead of true and false
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1" value="1"
th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2" value="0"
th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I tried to use this form to put checkboxes on a form:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
My problem is that when I try to get the checkboxes checked with my parameters, I always can get only one (the last one checked, example: if I check 1 and 2, I will get 2 only).
How can I do to get them in my controller?
Thanks in advance
Try giving your inputs a name attribute with unique value attributes and unique id attributes.
Example:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" id="first" value="1" name="box-selections[]" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="second" value="2" name="box-selections[]"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="third" value="3" name="box-selections[]"> Checkbox 3
</label>
</div>
I am making an acceptance test on Ruby on Rails 3.0.11 with Capybara 1.1.2, and trying to select two checkboxes in a form.
Here is the view code for the checkboxes (using haml 3.1.3 and simple_form 2.0.4):
= f.input :countries,
:collection => MusicTeaser.teaser_countries,
:as => :check_boxes
The collection looks like this:
[["AT", "at"], ["CH", "ch"], ["DE", "de"], ["ZA", "za"]]
And the HTML generated:
<div class="input check_boxes optional">
<label class="check_boxes optional control-label">Countries</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_at" name="music_teaser[countries][]" type="checkbox" value="at">AT
</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_ch" name="music_teaser[countries][]" type="checkbox" value="ch">CH
</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_de" name="music_teaser[countries][]" type="checkbox" value="de" checked="">DE
</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_za" name="music_teaser[countries][]" type="checkbox" value="za">ZA
</label>
<input name="music_teaser[countries][]" type="hidden" value="">
</div>
The code to select them looks like this (pretty straightforward):
check 'music_teaser_countries_de'
check 'music_teaser_countries_za'
I expected that, on submit, the countries param would look like this:
params[:music_teaser][:countries] = ["de", "za"]
But it appears as this:
params[:music_teaser][:countries] = ["deza"]
So it seems like Capybara is doing something wrong when selecting more than one checkbox. Ideas?