I am using simple_form with rails 4. The form seems to work properly, except i cannot click on any of the input fields. When i try to click on them, nothing happens, and I can't enter text. Here is the code:
<%= simple_form_for #mimic, url: create_employer_account_path, html: {id: 'braintree-payment-form'}, method: :post, remote: true do |f| %>
<div class="forms clearfix" style="margin-left: auto; margin-right: auto; width: 35%;">
<h1>Personal / Business Information</h1>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :first_name, input_html: {class: 'field', style: 'width: 300px;', id: 'first_name'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :last_name, input_html: {class: 'field', style: 'width: 300px;', id: 'last_name'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :company, input_html: {class: 'field', style: 'width: 300px;', id: 'company'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :email, input_html: {class: 'field', style: 'width: 300px;', id: 'email'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :phone, input_html: {class: 'field', style: 'width: 300px;', id: 'phone'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :fax, input_html: {class: 'field', style: 'width: 300px;', id: 'fax'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :website, input_html: {class: 'field', style: 'width: 300px;', id: 'website'} %>
</p>
</div>
<p class="buttons action-buttons text-center">
<%= f.submit "SUBMIT", class: 'submit-button button button-save button-submit'%>
</p>
<% end %>
Related
Updating simple_form works fine but when I reload the page, it renders all the inputs as disabled. Any ideas? I can't find anything in the documentation that says what causes it to do this automatically. Thanks
the simple form.
<%= simple_form_for #product_campaign, url: update_completion_criteria_rules_partner_product_product_campaign_path(partner_id: #partner.id, product_id: #product.id, id: #product_campaign.id), remote: true, html: { id: "product-campaign-completion-criteria-rules"} do |f| %>
<div class="">
<%= f.simple_fields_for :completion_criteria_rules, f.object.completion_criteria_rules.order(:created_at) do |complete_criteria_rule| %>
<%= render 'completion_criteria_rule_fields', :f => complete_criteria_rule %>
<% end %>
<%= link_to_add_association "Add Completion Criteria Rule", f, :completion_criteria_rules, class: "btn btn-info float-left mt-10", id: "add-completion-criteria-rule", data: { } %>
<button type="submit" class="btn btn-info float-right mt-10" id="update-product-campaign-form" ><span id="save-journey-button-text">Save Changes</span></button>
</div>
<% end %>
completion_criteria_rule_fields partial
<div class="form-row">
<div class="form-group col-md-6">
<%= f.input :events, collection: CompletionCriteriaRule::EVENTS_OPTIONS, label: 'Choose Events', include_blank: false, input_html: { class: "form-control form-field-type", "data-provide": "selectpicker", multiple: true } %>
</div>
<div class="form-group col-md-6">
<%= f.input :actions, collection: [['Add Campaign', 'add_campaign']], label: 'Choose Action', input_html: { class: "form-control form-field-type actions-dropdown", "data-provide": "selectpicker", multiple: true } %>
</div>
</div>
<div class="form-row add-campaign-dropdown-wrapper" <% unless f.object.actions&.include?('add_campaign') %>style="display:none;<% end %>">
<div class="form-group col-md-6">
<%= f.input :transition_campaign_id, collection: #product_campaign.product.product_campaigns.where.not(id: #product_campaign.id).published.map{|k,v| [k.name.titleize, k.id]}, label: 'Select Campaign To Add', input_html: { class: "form-control form-field-type", "data-provide": "selectpicker" } %>
</div>
<div class="form-group col-md-6">
<label>Campaign Start Delay</label>
<div class="input-group">
<%= f.input_field :transition_campaign_delay, class: "form-control form-field-type" %>
<span class="input-group-addon">days</span>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<span class="float-right">
<%= link_to_remove_association 'Remove Rule', f, class: "btn btn-danger btn-xs" %><br>
</span>
</div>
</div>
<div class="divider"></div>
</div>
completion_criteria_rule.rb
class CompletionCriteriaRule < ApplicationRecord
EVENTS_OPTIONS = [["Appointment Booked", "appointment.booked"], ["Appointment Attended", "appointment.attended"], ["Appointment Cancelled", "appointment.cancelled"], ["Lifecycle Changed to Client", "lifecycle.client"], ["Lifecycle Changed to Lead", "lifecycle.lead"], ["Lifecycle Changed to Former Client", "lifecycle.former_client"], ["Lifecycle Changed to None", "lifecycle.none"]].freeze
belongs_to :product_campaign
belongs_to :transition_campaign, class_name: 'ProductCampaign', foreign_key: 'transition_campaign_id', optional: true
validates :product_campaign, :events, :actions, presence: true
validates :transition_campaign, :transition_campaign_delay, presence: true, if: -> { actions&.include? 'add_campaign' }
before_save :reject_blank_events
before_save :reject_blank_actions
def reject_blank_events
events.reject!(&:blank?)
end
def reject_blank_actions
actions.reject!(&:blank?)
end
end
Found out that I had some js that was disabling form inputs with a certain class that was disabling the inputs after page load. All working now.
Hi am trying to render my devise registration/new form onto my sessions/new page. I want the user to be able to either create or login on the same page.
Here is what I have so far, but it's not working. It thinks it's a login form and not a creation form, as it lets me login on my registration form.
In app/views/users/sessions/new.html.erb, I have this code:
<br>
<br>
<body class="bg-dark">
<div class="">
<div class="row">
<div class="col-sm">
<div class="container text-white">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<h1>Sign in</h1>
<p>Welcome back.</p>
<form role="form">
<div class="row">
<div class="form-group col-lg-8">
<%= f.input :email,
required: false,
autofocus: true,
input_html: { autocomplete: "email"} %>
</div>
</div>
<div class="row">
<div class="form-group col-lg-8 ">
<%= f.input :password,
required: false,
input_html: { autocomplete: "current-password" } %>
</div>
</div>
<div class="row">
<div class="form-group col-lg-8 ">
<%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
</div>
</div>
<%= f.button :submit, "Sign in", class: "btn btn-info" %>
</form>
</div>
<% end %>
</div>
<div class="col-sm">
<div class=" text-white ">
<%= simple_form_for(resource, as: resource_name, url: registration_path(:user)) do |f| %>
<h1>Create an account</h1>
<p>Its quick and easy.</p>
<%= f.error_notification %>
<form role="form">
<div class="row">
<div class="form-group col-lg-8">
<%= f.input :email,
required: true,
autofocus: true,
input_html: { autocomplete: "email" }%>
</div>
</div>
<div class="row">
<div class="form-group col-lg-8 ">
<%= f.input :password,
required: true,
hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length),
input_html: { autocomplete: "new-password" } %>
</div>
</div>
<div class="row">
<div class="form-group col-lg-8 ">
<%= f.input :password_confirmation,
required: true,
input_html: { autocomplete: "new-password" } %>
</div>
</div>
<%= f.button :submit, "Create Account", class: "btn btn-success" %>
</form>
</div>
<% end %>
</div>
</div>
</div>
</body>
<div class="container">
<%= render "devise/shared/links" %>
</div>
I have tried to put a div block, with class="col-md-6 col-md-offset-3", around my devise simple_form expecting that this would take 1/3 of my screen width and would be centralized (offset). It did not worked. Why ?
<div class="col-md-6 col-md-offset-3">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true ,
input_html: { autocomplete: "email" }%>
<%= f.input :password,
required: true,
hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length),
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation,
required: true,
input_html: { autocomplete: "new-password" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
</div>
The class is offset-md-3 not col-md-offset-3
<div class="row">
<div class="col-md-6 offset-md-3">
...
</div>
</div>
I am quite new to the simple form gem and I'd like to customize the inputs with SVG add-ons such as an email picture into the input field "Email"
Here is the svg code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve" width="24" height="24"><title>email 84</title><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="#111111" stroke="#111111"><polyline data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" points="1,3 12,13 23,3 " stroke-linecap="butt"/> <rect x="1" y="3" fill="none" stroke="#111111" stroke-miterlimit="10" width="22" height="18"/></g></svg>
And here is my simple form code:
<div class="col-xs-12 col-sm-4 col-sm-offset-4">
<div class="form-login">
<p>Welcome !!</p>
<div class="hr">
</div>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, required: true, autofocus: true, placeholder: "First name" %>
<%= f.input :last_name, required: true, autofocus: true, placeholder: "Last name" %>
<%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
<%= f.input :password, required: true, hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length), placeholder: "Password" %>
<%= f.input :password_confirmation, required: true, placeholder: "Password" %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up", class: "btn btn-danger small-btn width-login" %>
</div>
<% end %>
</div>
</div>
Where should I put the SVG code?
Thanks !!
You can put before input tag and into a label tag
<%= f.label(:email) do %>
# Here is the SVG
#Edit
<%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
<% end %>
Edit:
And you should use css like in How to add a SVG icon within an input?
I'd like to apply bootstrap to the input fields as following.
<div class="input-group">
<span class="input-group-addon">Title</span>
<input type="text" class="form-control">
</div>
My current code is as following.
_form.html.erb
<%= simple_nested_form_for #event do |f| %>
<%= f.input :title %>
<%= f.input :description, input_html: { rows: 5, cols: 30 } %>
<%= f.input :charge_person %>
.
.
.
<% end %>
It would be appreciated if you could give me the best way in Rails.
This should do the trick:
<%= simple_nested_form_for #event do |f| %>
<div class="input-group">
<span class="input-group-addon">Title</span>
<%= f.input :title, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<%= f.input :description, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon">Charge Person</span>
<%= f.input :charge_person, class: 'form-control' %>
</div>
...
<% end %>
You shouldl read more detail SIMPLE FORM DOCS
<%= simple_nested_form_for #event, , wrapper_html: { class: 'input-group' } do |f| %>
<%= f.label :title, wrapper_html: { class: 'input-group-addon' } %>
<%= f.input_field :title, wrapper_html: { class: 'form-control' } %>
.
.
.
<% end %>