What is the best way to place two radio button inside a simple_form, where
one button is by default disabled and another is selected!
f.input_field :listing_type, as: :radio_buttons, collection: [ "lease", "sale"], :item_wrapper_class => 'inline'
this is giving me two buttons where both are enabled and selected. I want sale to be disabled and lease to be selected by default.
Here's an updated answer. You can:
Specify which radio button is disabled by adding hash to the collection: collection: [['op1', 'val1', disabled: false], ['op2', 'val2', disabled: true]]
Specify which radio button is checked by either add checked to its collection hash, or add checked: value_to_be_checked to the main options hash.
Here's an examples of both options:
example1:
<%= f.input_field :listing_type, as: :radio_buttons, collection: [ ['lease', 'lease', disabled: false], ['sale', 'sale', disabled: true]], checked: 'lease', :item_wrapper_class => 'inline' %>
example2:
<%= f.input_field :listing_type, as: :radio_buttons, collection: [ ['lease', 'lease', disabled: false, checked: true], ['sale', 'sale', disabled: true]], :item_wrapper_class => 'inline' %>
Then you have to make them separately with the same name so that one of them can be disabled.
<%= f.input :listing_type, as: :radio_buttons, :disabled: true, input_html: { value: 'lease' } %>
<%= f.input :listing_type, as: :radio_buttons, input_html: { value: 'sale' } %>
Radio Buttons behave the same as Select Options as far as I can tell. If you pass an array to an input's collection option consisting of the Display Text, the value of the input, and any additional HTML attributes - in that order - you can embed whatever you want in the radio buttons (or any inputs for that matter).
Ex:
radio_button_options = LeaseCalculator::TERMS.map do |term|
["#{term} Months",term, {disabled: (term > maximum_term_length)}]
end
= form.input :term,
as: :radio,
collection: radio_button_options
Here I put a conditional on the HTML5 disabled attribute. It works perfectly in the resultant HTML.
<input id="lease_calculator_term_48" data-calculator-input="term" class="update_calculator" type="radio" value="48" name="lease_calculator[term]">
<input id="lease_calculator_term_60" data-calculator-input="term" class="update_calculator" disabled="disabled" type="radio" value="60" checked="checked" name="lease_calculator[term]">
NOTE: The second input has HTML5 Disabled on it, the first one does not.
try this out
f.input_field :listing_type, as: :radio_buttons, collection: [ "lease", "sale"], :item_wrapper_class => 'inline', :checked => "lease"
you can just hack radio_button disabled functionality with jquery insist of separating out radio buttons.
f.input_field :listing_type, as: :radio_buttons, collection: [ "lease", "sale"], :item_wrapper_class => 'inline', :checked=> "lease", :disabled=> true
/app/assets/application.js
$(':radio:not(:checked)').attr('disabled', true);
See you can use the form helper to make your form and set the default value like this
<% form_tag desired_path do %>
<%= radio_button_tag(:options, "res_a", true) %>
<%= label_tag "res a" %>
<%= radio_button_tag(:options, "res_b") %>
<%= label_tag "res_b" %>
<%= submit_tag :value => "submit"%>
<% end %>
by providing true you can make the option as default as shown.
Related
I have a enum definition for my User model.
class User < ActiveRecord::Base
enum program_of_study: [
:program_of_study_unknown, :program_of_study_cs, :program_of_study_ceg,
:program_of_study_is, :program_of_study_science,
:program_of_study_engineering, :program_of_study_fass,
:program_of_study_business, :program_of_study_others
]
end
And in simple_form I have:
<%= simple_form_for(locals[:user], wrapper: :horizontal_form, html: {class: 'form-horizontal'},
url: {action: (locals[:is_new] ? 'create' : 'update')}) do |f| %>
<%= f.error_notification %>
<%= f.input :program_of_study, collection: User.program_of_studies, include_blank: false, selected: locals[:user].program_of_study %>
<%= f.button :submit, class: 'btn-success' %>
<% end %>
However, it seems that although the program_of_study of a user is 'program_of_study_science'(by checking in rails console), when I render the form, the shown select element still has 'program_of_study_unknown' as the displayed one. The correct one was not selected.
Instead of the enum I used the keys and it seems to work, have you tried that:
collection: User.program_of_studies.keys
I didn't have to specify a selected option. My code looks like this:
input :status, as: :select, collection: Venue.statuses.keys, include_blank: false
My solution in the end
<%= f.input :program_of_study, collection: User.program_of_studies, include_blank: false, selected: User.program_of_studies[locals[:user].program_of_study] %>
I have a hidden field as such:
<%= f.input :authentication, label: 'Authentication Password', as: :hidden %>
I want to show the hidden field when the admin radio button is clicked:
<%= f.input :account_type , as: :radio_buttons, :checked => 'Student', collection: ['Student', 'Admin'], wrapper: :vertical_radio_and_checkboxes %>
How would I do so?
I have tried using
$('#user_authentication').show();
But this does not work.
Remove as: hidden and use
$('#user_authentication').hide(); when DOM is loaded.
tell me how to configure simple_form. I would like to use the checkbox of semantic ui, but when I wrap checkbox in the class, he becomes active, that is, visually it is, but when you click the check box is not activated.
= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
.ui.three.column.middle.aligned.relaxed.grid.basic.segment
.column
.column
.column
.ui.form.segment
#marg.field= f.label :email, 'Email'
#marg.field=f.input :email, placeholder: 'Email', autofocus: true, label: false
#marg.field= f.label :password, 'Пароль'
= f.input :password, :required => false, placeholder: 'Пароль', label: false
#marg.ui.toggle.checkbox
= f.input :remember_me, as: :boolean if devise_mapping.rememberable?
#marg= f.button :submit, 'Войти!', class: 'small ui blue submit button'
http://i.imgur.com/C8Wn4K9.png
Please try it
= f.input :remember_me, as: :boolean, boolean_style: :inline
A simpler way to do this is to create a custom simple form wrapper. Here is a blogpost which describes how to add the wrapper: http://pranavsingh.me/semantic-ui-simple-form-wrapper/
The above configuration will automatically add all the essential classes semantic form classes, and also adds wrappers to create proper checkbox fields. Below is an example:
= f.input :published, label: "Published?",
hint: "If you are not ready to go live yet, keep this site unpublished.",
wrapper: :ui_toggle_checkbox
Here's what I had to do (the accepted answer got me on the right track, but didn't fully fix the issue):
In the config/initializers/simple_form.rb file, change
config.boolean_style = :nested
to
config.boolean_style = :inline
This prevents Simple Form from wrapping the input tag in the label tag (essentially inserting a tag between the '.ui .checkbox' div and the input, which breaks Semantic's checkbox functionality).
In the app/assets/javascripts/application.js file:
$('.ui.checkbox').find('input').checkbox();
My form now displays checkboxes correctly and passes the appropriate value when submitted.
Here is another option (to just fix one checkbox) -
In a _form.html.erb partial:
<div class="inline field">
<div class="ui checkbox">
<%= my_form.input :my_input, label: 'My Label', as: :boolean, boolean_style: :inline %>
</div>
</div>
In the application.js file:
$('.ui.checkbox').find('input').checkbox();
I'm trying to set a label for the following line but I keep getting an error if I add label_method anywhere. label: is just ignored. How can I add a label for f.select?
<%= f.select :state_identifier, Location::STATE, { prompt: 'State', id: 'state' } %>
I tried the following but it doesn't format properly in form-horizontal, leaving no gap between the label and data.
<%= f.label :state_identifier, label: 'State' %>
This is because f.select is not a simple_form method and does not support :label
Something like this should work for you w/ simple form.
<%= f.input :state_identifier, :label => "State", :collection => ["a","b"], :input_html => {:id=>"state" } %>
Hope this helps.
I have this textfield that I want to always have this value:
<%= text_field_tag :quantity, "1", class: "uneditable-input" %>
i.e. I don't want the user to be able to change the quantity value to anything other than 1.
I tried adding disabled: true and that worked to grey out the field, but it also disabled it - changing the behavior of the form (i.e. the form was submitted without a quantity value).
All I want to do is to force every person that submits this form to be able to see the Quantity of 1 - and not be able to change it - and have the system process quantity of 1.
How do I do that?
Try this <%= text_field_tag :quantity, "1", class: "uneditable-input", :readonly => true %>
or if you want to disable it you can do it this way
<%= text_field_tag :quantity, "1", class: "uneditable-input", :disabled => true %>
Just try:
<%= text_field_tag :quantity,:readonly => true%>
You can simply set the text field value to 1 server side, leaving disabled: true client side.
Try:
<%= text_field_tag :quantity, nil, {value: "1", disabled: true} %>
Output:
<input disabled="disabled" id="quantity" name="quantity" type="text" value="1">