I have the following snippet out of one of my forms, I would like to modify the placeholder text, so that e.g. "Select assignee" will appear before typing a data in the field. I have changed the placeholder text and the prompt, but only the default text "Please select" is displayed. If I change the text in the placeholder for the "start_at" and "end_at", it does changes, but not e.g. for "all_day" or "office_in_charge" and "contact_person". Why doe the change work for one but not for the other.
How can I modify it to what I want it to be ?
Thanks and regard,
Dani
<div class="row form-group">
<div class="col-sm-3 field">
<%= form.text_field :start_at, {placeholder: :start_at, class: 'form-control date-field datetimepick', readonly: (!this_is_a_subevent) } %>
</div>
<div class="col-sm-3 field">
<%= form.text_field :end_at, {placeholder: :end_at, class: 'form-control date-field datetimepick', readonly: (!this_is_a_subevent) } %>
</div>
<div class="col-sm-1 form-check field">
<%= form.check_box :all_day, {placeholder: :all_day, class: 'form-check-input'} %>
<%= form.label :all_day, {class: 'form-check-label'} %>
</div>
<div class="col-sm-5">
<%
offices = Office.all.collect {|t| [t.display_name, t.id]}
%>
<%= form.label :assign_event_to %>
<%= form.select :office_in_charge, offices, {prompt: :office_in_charge}, {placeholder: :office_in_charge, class: 'form-control'} %>
<%
event_owners =
::CoreModels::PeopleAndCompanies::Person.all +
::CoreModels::PeopleAndCompanies::Company.all +
Office.all +
Department.all #+
#Team.all
%>
<%= form.label :contact_person %>
<%= form.collection_select :event_owner_gid, event_owners, :to_global_id, :to_s, {prompt: :event_owner}, {placeholder: :event_owner, class: 'form-control'} %>
</div>
</div>
How would you do a placeholder for a checkbox or a list? It's not related to rails. Try to do it first in a plain html. A placeholder cannot be used to these inputs.
Well I found how, just use, e.g.:
{:prompt => "Select contact person"}
e.g.:
<%= form.select :contact_person, person, {:prompt => "Select contact person"}, {class: 'form-control'} %>
This works.
Regards,
Dani
Related
Currently, I have a model with 100+ records. I have a second model that has_one of the first model. In my form to create the second model, I'm using collection_select calling the first model. The user ends up having to scroll and look through each record. Is there a searchable collection_select or some other form helper that would make this a better experience? Below is my current solution:
<%= form.collection_select :thing_id, Thing.all, :id, :name, {class: "form-control"} %>
_form.html.erb
<%= form_with(model: order) do |form| %>
<% if order.errors.any? %>
<div style="color: red">
<h2><%= pluralize(order.errors.count, "error") %> prohibited this order from being saved:</h2>
<ul>
<% order.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= form.label 'Status:' %>
<%= form.collection_select :order_status_id, OrderStatus.all, :id, :status, #order.persisted? ? {class: "form-control"} : {:selected => 1}, {class: "form-control"} %>
</div>
<div>
<%= form.label :subject, style: "display: block" %>
<%= form.text_field :subject %>
</div>
<div>
<%= form.label :body, style: "display: block" %>
<%= form.text_area :body %>
</div>
<div>
<%= form.label 'Asset:' , style: "display: block" %>
<%= form.collection_select :thing_id, Thing.all, :id, :name, {class: "form-control"} %>
</div>
<div class="form-group">
<%= form.label :assigned_to %>
<%# form.collection_select :assigned_to_id, User.all, :id, :email, {:include_blank => true}, {class: "form-control"} %>
<%= form.collection_select :assigned_to_id, User.all, :id, :email, {:prompt => true}, {class: "form-control"} %>
</div>
<div class="mb-3">
<%= form.label :images, class: "form-label" %>
<%= form.file_field :images, {multiple: true, class: "form-control", id: "formFileMultiple", type: "file"} %>
</div>
<%= form.hidden_field :requested_by_id, value: current_user.id %>
<div>
<%= form.submit %>
</div>
<% end %>
I'd be happy to include any other code if requested.
You could use select2
Select2 is a jQuery replacement for dropdown boxes and it contains a searchbox to filter through data and other features too such as lazy loading dropdown options. Check it out
https://select2.org/getting-started/basic-usage
I do have a select dropdown and in that few options also and in that OTHERS option also
<div class="form-group clearfix">
<div class="col-sm-2" id="mainone">
<%#= form.text_field :city, placeholder: "CITY", class: 'form-control required' %>
<%= form.select :city, options_for_select([['DELHI'],['GURGAON'],['FARIDABAD'],['GHAZIABAD'],['NOIDA'],['MUMBAI'],['THANE'], ['BANGALORE'],['OTHERS']]), {include_blank: 'CITY*'}, class: 'form-control required', name: 'city', :onchange => 'Checkselectedone(this.value);' %>
<% if #ezetab.errors[:city].present? %>
<span class="error_msg"><%= #ezetab.errors[:city][0]%></span>
<% end %>
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-2">
<%= form.text_field :city, name: 'city', id: 'newtext', label: "Others",style: 'display:none;' %>
</div>
</div>
when i select the others option one more text box should come and i
can type which is my city.
but the thing is here that entered city data also should be store in
the same filed. but i dont no how to save that one in the same field.
these are the my fields
def ezetab_params
params.require(:ezetab).permit(:name, :email, :phonenumber, :organization, :city)
end
this is javascript code
<script type="text/javascript">
function Checkselectedone(val){
alert("one more text box is coming");
var element=document.getElementById('newtext');
if(val=='OTHERS')
element.style.display='block';
else
element.style.display='none';
}
</script>
can any one tell me how to store that other option data also in the same city filed and i have give required also for that it should not be shown any validation msg. please let me know.
thanks in advance
<div class="form-group clearfix">
<div class="col-sm-2" id="mainone">
<%#= form.text_field :city, placeholder: "CITY", class: 'form-control required' %>
<%= form.select :city, options_for_select([['DELHI'],['GURGAON'],['FARIDABAD'],['GHAZIABAD'],['NOIDA'],['MUMBAI'],['THANE'], ['BANGALORE'],['OTHERS']]), {include_blank: 'CITY*'}, class: 'form-control required', :onchange => 'Checkselectedone(this.value);' %>
<% if #ezetab.errors[:city].present? %>
<span class="error_msg"><%= #ezetab.errors[:city][0]%></span>
<% end %>
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-2">
<%= text_field_tag :others, "", class: 'form-control', id: 'newtext', style: 'display:none;' %>
</div>
</div>
Controller: -
def ezetab_params
ep = params.require(:ezetab).permit(:name, :email, :phonenumber, :organization, :city)
ep[:city] = params[:others] if params[:others].present?
ep
end
I want to customize input areas in this code
<%= simple_form_for #fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %>
<%= f.input :regular, label: "Regular" %>
<%= f.input :medium, label: "Medium"%>
<%= f.input :premium, label: "Premium" %>
<%= f.input :diesel, label: "Diesel" %>
to have styling like the image below
I dont want horizontol or anything. Just want that dollor in front.
Or even better, something like below but with $ instead of #
You can find solution here. He uses Bootstrap and SimpleForm
You have to add bootstrap css library into your application and try the below code
simple_form_for #fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :regular, placeholder: "Regular", class:"form-control" %>
</div>
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :medium, placeholder: "Medium", class:"form-control"%>
</div
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :premium, placeholder: "Premium",class:"form-control" %>
</div
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :diesel, placeholder: "Diesel",class:"form-control" %>
</div
</div>
<%end%>
I have a rails app where user can assign task to another user by creating task action. At the moment I have the f.collection_select, but as the number of users grows it won't be a good solution. I would like to change it into kinda search form. My problem is that I don't see how I can do this. I have other search forms, but those are for show/index action. How can I do this for the create action?
here is my current code:
<%= form_for ([#user, #task]) do |f| %>
<%= render 'layouts/error_messages', object: f.object %>
<div class="field form-group">
<%= f.label :executor_id %>
<%= f.collection_select(:executor_id, User.all, :id, :email, class: "form-control") %>
</div>
<div class="field form-group">
<%= f.label :content %>
<%= f.text_area :content, class: "form-control" %>
</div>
<div class="field form-group">
<%= f.label :deadline %>
<%= f.date_select :deadline, class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Create Task", class: 'btn btn-primary', "data-sid" => current_user.id, "data-rip" => :executor_id %>
</div>
<% end %>
I have following situation:
I've got two models
a Risk model with the attributes name, risk_class_id, description, level
a Risk_Class model with the attributs name and description
A Risk has one Risk Class and a Risk Class has many Risks. This association works fine. I can assign a Risk Class to a Risk. To create a Risk I use the following form:
<%= form_for #risk, :html => { :class => 'form-horizontal' } do |f| %>
<div class="control-group">
<%= f.label :name, :class => 'control-label' %>
<div class="controls">
<%= f.text_area :name, :class => 'text_area' %>
</div>
</div>
<div class="control-group">
<%= f.label :risk_class_id, :class => 'control-label' %>
<div class="controls">
<%= collection_select( :risk, :risk_class_id, RiskClass.all, :id, :name, :prompt => true ) %>
</div>
</div>
<div class="control-group">
<%= f.label :description, :class => 'control-label' %>
<div class="controls">
<%= f.text_area :description, :class => 'text_area' %>
</div>
</div>
<div class="control-group">
<%= f.label :level, :class => 'control-label' %>
<div class="controls">
<%= f.text_area :level, :class => 'text_area' %>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
</div>
<% end %>
Now i would like to have that the textarea field for the description gets prepopulated based on the selected risk class, as a risk class has a description.
Thankful for any help!
EDIT
I've added following javascript code to the form and edited the collection select the following way:
<%= javascript_tag do %>
function risk_class_selection(riskclassId){
window.alert(riskclassId);
}
<% end %>
<div class="control-group">
<%= f.label :risk_class_id, :class => 'control-label' %>
<div class="controls">
<%= collection_select( :risk, :risk_class_id, RiskClass.all, :id, :name, {:prompt => true} , {:onchange => "risk_class_selection(this.value)"}) %>
</div>
</div>
SOLUTION:
in case anyone is interested i followed the way grotori described and my solution looks now like this:
I've got this risk.js file:
function risk_class_selection(riskclassId){
if (riskclassId != ""){
$.getJSON("/risk_classes/"+riskclassId+".json", function(data){
if ( $('#risk_description').val() == "" ){
$("#risk_description").val(data.description);
}
else{
if ( confirm('Are you sure you want to change the risk description?') ){
$("#risk_description").val(data.description);
}
else{
}
}
}
)
}
else{}
}
And in the Risk Form i've got the first div with the onchange event and the second where the textarea should be prepopulated:
<div class="control-group">
<%= f.label :risk_class_id, :class => 'control-label' %>
<div class="controls">
<%= collection_select( :risk, :risk_class_id, RiskClass.all, :id, :name, {:prompt => true} , {:onchange => "risk_class_selection(this.value)"}) %>
</div>
</div>
<div class="control-group">
<%= f.label :description, :class => 'control-label' %>
<div class="controls">
<%= f.text_area :description, :class => 'text_area' %>
</div>
</div>
You must bind an onchange event to your select field that will post back to your server the user's selection and respond with javascript that will re-render the textarea with the desired value you want.
You can do it in controller when preparing the object #risk. Something like this:
#risk = Risk.new(description: "blah blah")
Then the form will have this value with form_for tag.