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?
Related
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>
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'm having problems selecting an option with Capybara in a form made with Bootstrap and I don't know why.
This is how the form is actually written:
<div class="control-group radio_buttons optional application_read">
<label class="radio_buttons optional control-label">Read</label>
<div class="controls">
<span class="radio">
<label for="application_read_true">
<input class="radio_buttons optional" type="radio" value="true" name="application[read]" id="application_read_true">Yes
</label>
</span>
<span class="radio">
<label for="application_read_false">
<input class="radio_buttons optional" type="radio" value="false" checked="checked" name="application[read]" id="application_read_false">No
</label>
</span>
</div>
</div>
What I'm attempting to do is select the first Radio button with "Yes" label (so Read: Yes) this way:
find("#application_read_true").click
but it doesn't affect the form in any way.
How can I select the True option under the 'Read' label? Thanks in advance.
Try this:
choose("application_read_true")
But I believe that this should work too if you have only one radio button with "Yes" caption
choose("Yes")
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?
I have a problem with selecting radiobuttons using the arrow keys on a tablet (with keyboard dock). For normal buttons the selection works, but not for radiobuttons.
<body>
<div data-role="page" data-theme="a">
<div id="type_selection" data-role="controlgroup" data-type="horizontal">
<input type="radio" id="radio_option1" name="radio" checked="checked" /><label for="radio_option1">Option 1</label>
<input type="radio" id="radio_option2" name="radio" /><label for="radio_option2">Option 2</label>
<input type="radio" id="radio_option3" name="radio" /><label for="radio_option3">Option 3</label>
<input type="radio" id="radio_option4" name="radio" /><label for="radio_option4">Option 4</label>
</div>
</div>
</body>
Selecting a regular button with the keyboard is not a problem:
<button id="btn_dothat" data-inline="true">That</button>
Anyway to fix this or is this a limitation of jQuery Mobile?
Use checkboxradio("refresh") to update the radio buttons
UPDATE:
Rather than using div for control group, use fieldset
<fieldset id="type_selection" data-role="controlgroup" data-type="horizontal">
<input type="radio" id="radio_option1" name="radio" checked="checked" />
<label for="radio_option1">Option 1</label>
<input type="radio" id="radio_option2" name="radio" />
<label for="radio_option2">Option 2</label>
<input type="radio" id="radio_option3" name="radio" />
<label for="radio_option3">Option 3</label>
<input type="radio" id="radio_option4" name="radio" />
<label for="radio_option4">Option 4</label>
</fieldset>