I am trying to create a form that displays the radio options inline like this:
O Apple O Microsoft O Twitter O Square
Currently I have this line:
<%= f.association :company, as: :radio, label: false %>
But my form looks like this:
O Apple
O Microsoft
O Twitter
O Square
I have tried <div class="form-inline"></div> around that input and also adding
<%= f.association :company, as: :radio, label: false, :item_wrapper_class => 'inline' %>
Do I need to change the input to collection?
with regular rails you can do
<div class="radio">
<label>
<%= radio_button_tag "Product Type", "Retail Product or Service", true %>
Retail Product or Service
</label>
<label>
<%= radio_button_tag "Product Type", "Tax Code", false %>
Tax Code
</label>
<label>
<%= radio_button_tag "Product Type", "Discount Amount", false %>
Discount Amount
</label>
<label>
<%= radio_button_tag "Product Type", "Discount Percent", false %>
Discount Percent
</label>
</div>
You can use this:
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
Or this one (tag form only):
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Related
Hello I am doing my very first tests and I would need your help. I am using Rails5.
The problem is because of the nested fields I believe...(used Cocoon gem)
Capybara returns this error:
Capybara::ElementNotFound:
Unable to find field "event_participants_attributes_1489697584487_first_name"
my html looks like this:
<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489697584487_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489697584487][first_name]" id="event_participants_attributes_1489697584487_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489697584487_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489697584487][salary]" id="event_participants_attributes_1489697584487_salary"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489697584487][_destroy]" id="event_participants_attributes_1489697584487__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div>
and here is my features/events/create_event.spec.rb
require 'spec_helper'
require 'rails_helper'
describe "Creating an event" do
it "redirects on result page on success" do
visit "/"
click_link "Create a new event"
expect(page).to have_content('Wanna share fair?')
fill_in :name, with: 'Rent a plane'
fill_in "What is the total price", with: 200
click_link "Add a participant"
fill_in "event_participants_attributes_1489697584487_first_name", with: "John"
enter code here
fill_in ":event_participants_attributes_1489697584487_salary", with: 2300
click_button "See result"
expect(page).to have_content('Your salary together:')
end
end
And here are my simple_forms:
_form.html.erb
<%= simple_form_for #event do |f| %>
<div class="col-xs-12 col-md-10 col-md-offset-1">
<h1>Wanna share fair?</h1>
<p>Create an event, enter the bill to share.</p>
<%= f.input :name, label: "Event's name" %>
<%= f.input :total_price, label: "What is the total price" %>
<p>Add the participants.</p>
<div id="participants">
<%= f.simple_fields_for :participants do |participant| %>
<%= render "participants_fields", f: participant %>
<% end %>
<div class="links text-center">
<%= link_to_add_association "Add a participant", f, :participants, partial: "participants_fields", class:"btn btn-primary btn-sm btn-add-friend" %>
</div>
</div>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<%= f.submit "See result" , class:"btn btn-success btn-lg btn-event" %>
</div>
<% end %>
_participants_fields.html.erb
<div class="nested-fields">
<%= f.input :first_name, label: "Participant's first name" %>
<%= f.input :salary, label: "Participant's monthly pay" %>
<div class="links">
<%= link_to_remove_association "Remove this friend", f , class: "btn btn-danger btn-xs btn-remove-friend" %>
</div>
</div>
edit more html
<form novalidate="novalidate" class="simple_form new_event" id="new_event" action="/events" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="O5XM0JMiVBbpPNaKF1apw7rdtC/XEBhasZQoK6POycZQ2Zp14Td1ljoJyIUKTwtl91LlBHeDkKFtcWRnNu+iEQ==">
<div class="col-xs-12 col-md-10 col-md-offset-1">
<h1>Wanna share fair?</h1>
<p>Create an event, enter the bill to share.</p>
<div class="form-group string optional event_name"><label class="control-label string optional" for="event_name">Event's name</label><input class="form-control string optional" type="text" name="event[name]" id="event_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_total_price"><label class="control-label integer optional" for="event_total_price">What is the total price</label><input class="form-control numeric integer optional" type="number" step="1" name="event[total_price]" id="event_total_price" data-com.agilebits.onepassword.user-edited="yes"></div>
<p>Add the participants.</p>
<div id="participants">
<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705438668_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705438668][first_name]" id="event_participants_attributes_1489705438668_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705438668_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705438668][salary]" id="event_participants_attributes_1489705438668_salary" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489705438668][_destroy]" id="event_participants_attributes_1489705438668__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div><div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705443842_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705443842][first_name]" id="event_participants_attributes_1489705443842_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705443842_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705443842][salary]" id="event_participants_attributes_1489705443842_salary" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489705443842][_destroy]" id="event_participants_attributes_1489705443842__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div><div class="links text-center">
<a class="btn btn-primary btn-sm btn-add-friend add_fields" data-association="participant" data-associations="participants" data-association-insertion-template="<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_new_participants_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][new_participants][first_name]" id="event_participants_attributes_new_participants_first_name" /></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_new_participants_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][new_participants][salary]" id="event_participants_attributes_new_participants_salary" /></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][new_participants][_destroy]" id="event_participants_attributes_new_participants__destroy" value="false" /><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div>
" href="#">Add a participant</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<input type="submit" name="commit" value="See result" class="btn btn-success btn-lg btn-event" data-disable-with="See result">
</div>
</form>
IIRC the "1489697584487" part of the ids you show is created by Cocoon based on the current timestamp. That means every time you run your test the number will be different so you're not going to be able to select those elements by id.
Instead if you're only adding one participant you should be able to do something like
fill_in "Participant's first name", with: "John"
fill_in "Participant's monthly pay", with: "2300"
If you are adding multiple participants then depending on the exact layout you can use nth-child/nth-of-type CSS selectors to scope the fill_in or use all and select the one you want, etc.
find('.nested-fields:nth-child(2)').fill_in ...
all(:field, "Participant's first name", minimum: 2)[1].set("John") # 0 based index so minimum should be 1 more than the index you want
Also - For any of this to work you need to be using a JS capable driver (Cocoon requires JS). You haven't tagged your spec with js: true metadata so either you've overridden the default driver, or you're not currently using a JS capable driver - see https://github.com/teamcapybara/capybara#selecting-the-driver. Also see https://github.com/teamcapybara/capybara#transactions-and-database-setup and https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example if you haven't yet configure database_cleaner for use with JS capable drivers
This is type of button that interests me:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
</div>
And currently my form in Rails looks like this
<%= form_for [current_user, rsvp], remote: true do |f| %>
<%= f.hidden_field :event_id %>
<%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %>
<%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%>
<%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %>
<% end %>
HTML that the form above produces:
<form class="edit_rsvp" id="edit_rsvp_10" action="/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="MIbWTIdE3/6MJ5ly3oWleBRIvit5WA0CeFm/+caKj049svqPVG8h+uf76NVjxr31d69jlbMWNIIB4Eo7a6R9cw==" />
<input type="hidden" value="17" name="rsvp[event_id]" id="rsvp_event_id" />
<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" />
<input onclick="this.form.submit();" type="radio" value="interested" checked="checked" name="rsvp[status]" id="rsvp_status_interested" />
<input onclick="this.form.submit();" type="radio" value="not_interested" name="rsvp[status]" id="rsvp_status_not_interested" />
</form>
Sticking the btn class at the end like this <%= f.radio_button :status, "attending", :onclick => "this.form.submit();", :class => "btn btn-primary" %>, produces what looks like a standard Rails radio button.
Doing it the other way around produces Bootstrap buttons that don't change anything when you click them
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" autocomplete="off"> Attending
</label>
UPDATE 1
It looks like in Taryn's solution the original Rails radio button just got veiled underneath the new Bootstrap button, a click anywhere on the Bootstrap button produces no controller action.
and here's the HTML her code produces:
<form class="edit_rsvp" id="edit_rsvp_10" action="/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="qqtfAy+xZmnklDe+IXVGg2sFbhLC5laWQn4jRBb+RT+nn3PA/JqYbY9IRhmcNl4OCOKzrAiobxY7x9aGu9C3Ag==" />
<input type="hidden" value="17" name="rsvp[event_id]" id="rsvp_event_id" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" />
Attending
</label>
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="interested" checked="checked" name="rsvp[status]" id="rsvp_status_interested" />
Interested
</label>
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="not_interested" name="rsvp[status]" id="rsvp_status_not_interested" />
Not Interested
</label>
</div>
</form>
UPDATE 2
trying a submit button like so
<label class="btn btn-primary">
<%= f.submit :status => "attending", :onclick => "this.form.submit();" %>
Attending
</label>
still produces overlap and two separate buttons, one from Bootstrap and one from Rails. Only clicking the Rails' grey area triggers the controller action.
You'll need a combination of erb and html to make it look like bootstrap.
I haven't tested this, but something like this might work for your buttons:
<%= form_for [current_user, rsvp], remote: true do |f| %>
<%= f.hidden_field :event_id %>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %></label>
<label class="btn btn-primary active"><%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%></label>
<label class="btn btn-primary active"><%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %></label>
</div>
<% end %>
You may need to tweak it a bit - I am just combining the two snippets you gave.
Is it possible to have the checkbox labels on the left like the others, and the checkbox on the right like the other inputs with a horizontal form?
My current setup
It looks pretty awful.
EDIT:
<%= simple_form_for :apartment, :html => {:multipart => true, :class => 'form-horizontal'}, wrapper: :horizontal_form do |f| %>
<%= f.input :pets, as: :boolean, label: 'Husdyr tilladt' %>
<% end %>
which generates the following html in the view:
<div class="form-group boolean optional apartment_pets">
<div class="checkbox"><input value="0" type="hidden" name="apartment[pets]">
<label class="boolean optional" for="apartment_pets"><input class="boolean optional" type="checkbox" value="1" name="apartment[pets]" id="apartment_pets">
Husdyr tilladt
</label>
</div>
</div>
You can add pull-right to the class of your checkbox element like so:
<input name="uh" id="uhhuh" type="checkbox" class="pull-right" />
Updated answer with user provided code:
<div class="form-group boolean optional apartment_pets">
<div class="checkbox"><input value="0" type="hidden" name="apartment[pets]">
<label class="boolean optional" for="apartment_pets">Husdyr tilladt</label>
<input class="boolean optional" type="checkbox" value="1" name="apartment[pets]" id="apartment_pets" class="pull-right">
</div>
</div>
I never used simple_form but from browsing the documentation, it looks like you should use a combination of :label => false and :inline_label => true to position your label.
I'm using stripe.js, got this:
<%= form_tag charges_path, id: 'payment-form' do %>
<span class="payment-errors"></span>
<div class="form-group">
<label>
<span>Your email</span>
<input type="text" size="20" data-stripe="email">
</label>
</div>
<div class="form-group">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number">
</label>
</div>
<div class="form-group">
<label>
<span>Expiration (MM/YY)</span>
<input type="text" size="2" data-stripe="exp_month">
</label>
<span> / </span>
<input type="text" size="2" data-stripe="exp_year">
</div>
<div class="form-group">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc">
</label>
</div>
<input type="submit" class="submit" value="Submit Payment">
<% end %>
How do I add new fields to submit to stripe? such as name, address, etc. I think it has something to do with changing data-stripe but I couldn't find a "list" of the values that stripe accepts. Any ideas?
As per Stripe docs Updatable Stripe objects (Account, Charge, Customer, Refund, Subscription, and Transfer) have a metadata parameter. You can use this parameter to attach key-value data to these Stripe objects.
You can check HERE for the list of attributes of the Charge object.
In your question you refer to some attributes which can be better related to the user (Customer) rather than the Charge itself.
You can check HERE for the list of attributes of the Customer object.
You can use something like the following in your controller:
customer = Stripe::Customer.create(
:email => params[:email],
:source => params[:stripeToken],
:metadata => {
:address => params[:address],
:city => params[:city],
:region => params[:region],
:country => params[:country]
}
)
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().