I have this in my Form
<%= f.label :price, "price"%>
<%= f.text_field :price, :size=>20, :id =>"price" %>
<%= f.label :quantity, "Quantity"%>
<%= f.text_field :quantity, :size=>20, :id =>"qty" %>
<%= f.label :amount, "Amount"%>
<%= f.text_field :amount, :size=>20, :id =>"amount"%>
I want {price*quantity} to happen inside the 'amount' field as soon as i enter values inside 'price' and 'quantity' i.e calculations should happen before submit. I am new to jQuery/Ajax, so any help will do. Thanks in advance.
You can do something like this
$(function() {
$("#price, #qty").keyup(function() {
var p = $("#price").val();
var q = $("#qty").val();
$("#amount").val(q * p);
});
});
But you have to give the amount field the id "amount" and not reuse "price" as the id.
Related
I have a Rails 5 app form. Next to the form there is a button. Whenever a button is clicked the form auto fills. Works very well. However, now I want to use Trix editor to add some editing options to a text_area field. The notes field in the form is a trix_editor.
However, when I click the button to auto fill the form, it does not inject the content into the Trix editor. How can I make sure that happens?
Here is the workout_form
.panel-body
.form-group.has-feedback
.text-muted
= f.label 'Name the workout'
= f.text_field :title, class: 'form-control'
.form-group.has-feedback
.text-muted
= f.label :kind, 'Swim, Bike or Run?'
= f.select :kind, Workout.kinds.keys.to_a.map { |s| [s.humanize, s] }, {}, class: 'form-control bootstrap-select'
.form-group.has-feedback
.text-muted
= f.label :kind, 'Distance (km)'
= f.number_field :distance, class: 'form-control', step: :any
.form-group.has-feedback
.text-muted
= f.label :kind, 'Duration (Minutes)'
= f.number_field :duration, class: 'form-control'
.form-group.has-feedback
.text-muted
= f.label :kind, 'Notes'
= f.trix_editor :notes
.form-group.has-feedback
.text-muted
= f.label 'Insert Youtube or Vimeo link'
= f.text_field :video, class: 'form-control'
Here is the button that triggers the auto fill
a data-type="useTemplate" data-title=template.title data-kind=template.kind data-distance=template.distance data-duration=template.duration data-notes=template.notes data-video=template.video class="text-default"
and here is the CoffeeScript:
$ ->
$('a[data-type="useTemplate"]').click (e) ->
$('#workout_title').val(e.target.dataset.title)
$('#workout_kind').val(e.target.dataset.kind)
$('#workout_distance').val(e.target.dataset.distance)
$('#workout_duration').val(e.target.dataset.duration)
$('#workout_notes').val(e.target.dataset.notes)
$('#workout_video').val(e.target.dataset.video)
Any help would be much appreciated!
To insert content to trix editor you need to use Trix API:
// Assuming #workout_notes is a <trix-editor> element.
$("#workout_notes").get(0).editor.insertString(e.target.dataset.notes)
See documentation for more info.
I'm working on this reconciliation system where users can choose which fields they would like to use when importing records. I finally got the select to pre-populate with the correct info but can't for the life of me get the checkboxes to do the same. Here's my form:
#views/match_rule/edit.html.erb
<%= form_for(#match_rules) do |f| %>
<%= f.label :name, "Name" %>
<%= f.text_field :name, placeholder: "Rule Set Name" %>
<%= f.label :algorithm, "Choose an algorithm" %>
<%= f.select :algorithm, build_algorithm_select_options %>
<%= f.label :match_fields, "Available fields" %>
<% #field_options.each do |field| %>
<%= f.check_box :match_fields %>
<%= f.label :match_fields, "#{field.last}" %><br/>
<% end %>
<%= f.submit "Save", class: "button primary" %>
<%= link_to "Cancel", match_rule_index_path, class: "button" %>
<% end %>
Currently the corresponding controller is simply building a hash of fields so not to clutter up the view with repetitive code
#controllers/match_rule_controller.rb
def edit
#field_options = {
name: "Name",
email: "Email",
phone: "Phone Number",
gender: "Gender",
marital_status: "Marital Status",
dob: "Date of Birth",
campus: "Campus",
address: "Street Address",
city: "City",
state: "State",
zip: "Zip"
}
end
My model is serializing the fields
#models/match_rule.rb
class MatchRule < ActiveRecord::Base
has_many :inboxes
enum algorithm: [ :adjustable, :classic_minimal, :classic_standard ]
serialize :match_fields
end
and my database fields are storing all the options that should populate the checkboxes in the match_fields column
If it helps to see how I seeded the db with an array here's that:
#db/seeds.rb
classic_minimal = MatchRule.create(algorithm: 'classic_minimal', match_fields: ['name', 'email', 'phone', 'gender', 'zip'], name: 'Classic Minimal')
classic_standard = MatchRule.create(algorithm: 'classic_standard', match_fields: ['name', 'email', 'phone', 'gender', 'marital_status', 'dob', 'campus', 'address', 'city', 'state', 'zip'], name: 'Classic Standard')
adjustable = MatchRule.create(algorithm: 'adjustable', match_fields: ['name', 'phone', 'campus', 'marital_status', 'zip'], name: 'Adjustable')
I've checked out similar questions on here, the one closest to helping me have a breakthrough was the answer to this question: Set checkboxes on edit method in Rails 4 where he says to use .include? to determine the checked status, but I'm not sure what I would put in the params because I need to parse through the hash inside match_fields for each and every field and that would get pretty gnarly.
Any advice or guidance is greatly appreciated, thanks!
UPDATE
Update! Tried using fields_for but still not posting or populating.
<%= f.label :match_fields, "Available fields" %>
<%= fields_for :match_fields do |field| %>
<%= field.check_box :name %>
<%= field.label :name, "Name" %><br/>
<%= field.check_box :email %>
<%= field.label :email, "Email" %><br/>
<%= field.check_box :phone %>
<%= field.label :phone, "Phone" %><br/>
<% end %>
now when I check params on update in the console, it's saying:
"match_fields" => {
"name" => "1",
"email" => "1",
"phone" => "0"
},
but not actually posting or populating.
Figured it out.
<%= form_for(#match_rules) do |f| %>
<%= f.label :name, "Name" %>
<%= f.text_field :name, placeholder: "Rule Set Name" %>
<%= f.label :algorithm, "Choose an algorithm" %>
<%= f.select :algorithm, build_algorithm_select_options %>
<%= f.label :match_fields, "Available fields" %>
<%= f.check_box :name, { checked: #match_rules.match_fields.include?("name") } %>
<%= f.label :name, "Name" %><br/>
<%= f.check_box :email, { checked: #match_rules.match_fields.include?("email") } %>
<%= f.label :email, "Email" %><br/>
<%= f.check_box :phone, { checked: #match_rules.match_fields.include?("phone") } %>
<%= f.label :phone, "Phone" %><br/>
<%= f.check_box :gender, { checked: #match_rules.match_fields.include?("gender") } %>
<%= f.label :gender, "Gender" %><br/>
<%= f.check_box :marital_status, { checked: #match_rules.match_fields.include?("marital_status") } %>
<%= f.label :marital_status, "Marital Status" %><br/>
<%= f.check_box :dob, { checked: #match_rules.match_fields.include?("dob") } %>
<%= f.label :dob, "Date of Birth" %><br/>
<%= f.check_box :campus, { checked: #match_rules.match_fields.include?("campus") } %>
<%= f.label :campus, "Campus" %><br/>
<%= f.check_box :address, { checked: #match_rules.match_fields.include?("address") } %>
<%= f.label :address, "Street Address" %><br/>
<%= f.check_box :city, { checked: #match_rules.match_fields.include?("city") } %>
<%= f.label :city, "City" %><br/>
<%= f.check_box :state, { checked: #match_rules.match_fields.include?("state") } %>
<%= f.label :state, "State" %><br/>
<%= f.check_box :zip, { checked: #match_rules.match_fields.include?("zip") } %>
<%= f.label :zip, "Zip Code" %><br/>
<%= f.submit "Save", class: "button primary" %>
<%= link_to "Cancel", match_rule_index_path, class: "button" %>
You have to pass the .include? method inside the options hash. Now I just need to find a cleaner way to put this in the view.
Does anyone know how to add a class to a ruby on rails simple form, and how to add a class to an individual component so that I can style them later in CSS. Thank you
Straight from the simpleform docs:
It is also possible to pass any html attribute straight to the input, by using the :input_html option, for instance:
<%= simple_form_for #user do |f| %>
<%= f.input :username, input_html: { class: 'special' } %>
<%= f.input :password, input_html: { maxlength: 20 } %>
<%= f.input :remember_me, input_html: { value: '1' } %>
<%= f.button :submit %>
<% end %>
If you want to pass the same options to all inputs in the form (for example, a default class), you can use the :defaults option in simple_form_for. Specific options in input call will overwrite the defaults:
<%= simple_form_for #user, defaults: { input_html: { class: 'default_class' } } do |f| %>
<%= f.input :username, input_html: { class: 'special' } %>
<%= f.input :password, input_html: { maxlength: 20 } %>
<%= f.input :remember_me, input_html: { value: '1' } %>
<%= f.button :submit %>
<% end %>
Just adding a point to #bmac151's answer above.
For styling or dynamic scripting (e.g. javascript) purposes, you can also provide an ID to distinguish the elements from other elements of the same class by providing the id option, like so:
<%= simple_form_for #user, html: { id: 'simple-form' } do |f| %>
<%= f.input :username, input_html: { class: 'special', id: 'username' } %>
<%= f.input :password, input_html: { maxlength: 20, id: 'password' } %>
<%= f.input :remember_me, input_html: { value: '1', id: 'remember_me' } %>
<%= f.button :submit, id: 'submit-button' %>
<% end %>
This will give you unique IDs for all of the elements in the form, as well as the form itself.
From CSS, you can refer to these for styling, like this:
#simple-form {
font-size: 125%;
}
#submit-button {
text-transform: uppercase;
}
From Javascript, you can refer to elements by their element ID, as well. With this, you can apply dynamic behaviors to individual elements, rather than whole classes at a time. Here's a Javascript example:
var submit_button = document.getElementById("submit-button");
submit_button.addEventListener("click", function () {
alert('Yeeehaaah!');
submit_button.submit();
});
For fine-grained control, you'll want to use the id attribute rather than the class attribute; however, for theme-like control of elements, the class attribute is more useful.
<%= f.button :submit, "Sign in", class: "submit-button" %>
I have a column that stores JSON data. I don't know how to show it when it is on Edit state.
serialize :value, JSON
= f.fields_for :value do |ff|
.form-group
= ff.label :short
= ff.text_field :short, class: 'form-control'
.form-group
= ff.label :long
= ff.text_field :long, class: 'form-control'
In place of
= f.fields_for :value do |ff|
please use the following code:
= f.fields_for :value, OpenStruct.new(#object.value) do |ff|
You will need to replace #object with your model object.
I use simple_form gem in my Rails app. When I use code like this
= f.input_field :name, label: false, placeholder: 'Name'
= f.input_field :price, label: false, placeholder: 'Price'
= f.input_field :description, label: false, placeholder: 'Description'
= f.input_field :image, label: false, placeholder: 'Image'
I get HTML for input:
<input class="string required textform" id="item_name" label="false" maxlength="255" name="item[name]" placeholder="Имя" size="255" type="text">
As you can see size of input is 255 now. Actually it's much more than enough. How can specify the size of inputs?
Following is from simple_form documentation here
It is also possible to pass any html attribute straight to the input,
by using the :input_html option, for instance:
<%= simple_form_for #user do |f| %>
<%= f.input :username, input_html: { class: 'special' } %>
<%= f.input :password, input_html: { maxlength: 20 } %>
<%= f.input :remember_me, input_html: { value: '1' } %>
<%= f.button :submit %>
<% end %>
To set size of 100 for name input:
= f.input :name, label: false, placeholder: 'Name', input_html: { size: 100 }