If I have a rails field like:
<div class="field form-group">
<%= f.label :x_size, class: 'col-sm-1 control-label' %>
<div class="col-sm-3">
<%= f.text_field :x_size, class: 'form-control' %>
</div>
</div>
<div class="actions form-group">
<div class="col-sm-2">
<%= f.submit 'Submit', :class => 'btn btn-primary' %>
</div>
</div>
How would I validate the submit button to work only on numeric inputs?
Try this:
number_field
Docs here
Related
I'm new at programming and Rails in particular.
I have a form to create new goal records.
I have a select to chose the goal "Horizon": "weekly", "quarterly", or "yearly"
I also have a radio button, "Due date" to set the goal as for this term or next term (e.g. in the case of a weekly goal: this week or next week).
What I would like to do: is to dynamically update the radio button, based on the selected option of the select.
<%= form_with(model: #goal, url: goals_path, id: "new-goal-form", local: true) do |f| %>
<p><%= #goal.errors[:date].first %></p>
<div class="field">
<label class="label">Title</label>
<div class="control">
<%= f.text_field :title, class: "input"%>
</div>
<p><%= #goal.errors[:title].first %></p>
</div>
<div class="field">
<label class="label">Description</label>
<div class="control">
<%= f.text_area :description, class: "textarea"%>
</div>
</div>
<div class="field">
<label class="label">Horizon</label>
<div class="control">
<div class="select">
<%= f.select :horizon, options_for_select({"Weekly" => "week", "Quarterly" => "quarter", "Yearly" => "year"}, #horizon), include_blank: true %>
</div>
</div>
</div>
<div class="field">
<label class="label">Due Date</label>
<div class="control">
<%= f.radio_button :date, DateTime.current.to_date.end_of_week.strftime('%Y-%m-%d'), :checked => true, id:"radio-this", class: "is-checkradio" %>
<label for="radio-this">
This <%= #horizon.capitalize %>
</label>
<%= f.radio_button :date, 1.week.from_now.to_date.end_of_week.strftime('%Y-%m-%d'), id:"radio-next", class: "is-checkradio" %>
<label for="radio-next">
Next <%= #horizon.capitalize %>
</label>
</div>
</div>
<div class="field">
<label class="label">Related goal</label>
<div class="control">
<div class="select">
<%= f.select :related_goal_id, options_from_collection_for_select(#related_goal, 'id', 'title'), include_blank: true %>
</div>
</div>
</div>
<br/>
<div class="field is-grouped">
<div class="control">
<%= f.submit "Save", class: "button is-primary" %>
</div>
<div class="control">
<%= link_to "Cancel", goals_path(horizon: #horizon), class: "button" %>
</div>
</div>
<% end %>
I have tried adding :onchange at the end of the select, but nothing actually happens when changing the selected option.
Many thanks in advance.
Are your radio buttons id'd differently? They seem to both have the same autogenerated id. That won't work in javascript. Down below you set a click event for the select box and depending on what child is selected, you set a radio button checked to true.
$(document).ready(function(){
//when select option is chosen, set radio button to selected.
$("#select").click(function(){
var option = $(this).children("option:selected").val()
if(option == "weekly"){
$("#radio_button_weekly").prop("checked", true);
}
)}
)};
One of my tests is creating a form post via javascript that is dropping the first input field from the form. The tests are obviously failing because of this. When deugging via binding.pry, it looks like a js post is dropping the first parameter [address_by_user] when posting it to my route. This parameter is posted just fine when testing via the ui in localhost but no longer works with rspec. Any idea what could cause this? Tests were passing as of two days ago and the forms haven't been changed. I tried restarting my computer in case it was a zombie process or something being cached, but the behavior continues. Any thoughts?
The form that is submitted via javascript using the following code:
var form_id = "#form-step" + currentIndex;
var my_form = $(form_id);
var url = $(form_id).attr('action');
var form_data = my_form.serialize();
console.log(form_data);
var submission = $.post(url, form_data);
The form looks like this and is submitted after clicking the "Next" button in a wizard, that works fine.
<%= form_with(url:"add_property", scope: :property, class: "form", id:"form-step0") do |f| %>
<div class="form-body" id="step0form">
<h4 class="form-section"><i class="ft-location"></i> <%= t(:property_details) %></h4>
<%= render 'shared/error_messages', object: f.object %>
<div class="row">
<div class="form-group pac-card col-md-8 offset-md-1 required" id='pac-card'>
<div class="field" id='pac-container'>
<%= f.label :address_by_user, t(:address), class:"label-control" %>
<%= f.text_field :address_by_user, :required => true, class: "form-control pac-input google-autocomplete", id:"pac-input" %>
</div>
</div>
<div class="form-group form-row col-md-2">
<div class="field">
<%= f.label :unit_number %>
<%= f.text_field :unit_number, class: "form-control" %>
</div>
</div>
</div>
<div class="form-group form-row">
<div class="field col-md-2 offset-md-1">
<%= f.label :bedrooms %>
<%= f.number_field :bedrooms, :required => true, class: "form-control", in: 1...20 %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :bathrooms %>
<%= f.number_field :bathrooms, class: "form-control", in:1...10 %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :accommodates %>
<%= f.number_field :accommodates, class: "form-control", min: "0" %>
</div>
</div>
<div class="form-group form-row">
<div class="field col-md-2 offset-md-1"><%=label_tag(t(:property_type))%></div>
</div>
<div class="form-group form-row" data-toggle="buttons">
<div class="btn-group col-md-12">
<div class="field col-md-2 offset-md-1">
<%= f.label :room_type, class: 'text-center btn btn-default active' do %>
<%= image_tag('house-icon.png') %>
<br>
<%= f.radio_button :room_type, "entire_place", checked: true %>
<span>Entire Place</span>
<% end %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :room_type, class: 'text-center btn btn-default' do %>
<%= image_tag('room.png') %>
</br>
<%= f.radio_button :room_type, "private_room" %>
<span>Private Room</span>
<% end %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :room_type, class: 'text-center btn btn-default' do %>
<%= image_tag('people.png') %>
</br>
<%= f.radio_button :room_type, "shared_room" %>
<span>Shared Room</span>
<% end %>
</div>
</div>
</div>
<div id="hidden-fields">
<%= f.hidden_field(:latitude, id: 'latitude') %>
<%= f.hidden_field(:longitude, id: 'longitude') %>
<%= f.hidden_field(:street_number, id: 'street_number') %>
<%= f.hidden_field(:street_name, id: 'route') %>
<%= f.hidden_field(:city, id: 'locality')%>
<%= f.hidden_field(:state, id: 'administrative_area_level_1') %>
<%= f.hidden_field(:country, id: 'country')%>
</div>
</div>
<% end %>
When tested directly from the site via localhost, all parameters post fine and I get this: (as expected)
<ActionController::Parameters {"address_by_user"=>"Pura Uvita Vacation Home, Puntarenas Province, Uvita, Costa Rica", "unit_number"=>"", "bedrooms"=>"2", "bathrooms"=>"2.0", "accommodates"=>"6", "room_type"=>"entire_place", "latitude"=>"9.1839769", "longitude"=>"-83.72444630000001", "street_number"=>"", "street_name"=>"", "city"=>"Uvita", "state"=>"Provincia de Puntarenas", "country"=>"Costa Rica"} permitted: false>
When the parameters are obtained via binding.pry from the rspec flow, the following is the result:
<ActionController::Parameters {"unit_number"=>"", "bedrooms"=>"2", "bathrooms"=>"2", "accommodates"=>"6", "room_type"=>"entire_place", "latitude"=>"", "longitude"=>"", "street_number"=>"", "street_name"=>"", "city"=>"", "state"=>"", "country"=>""} permitted: false>
The two most likely causes of this are
The fields are no longer actually being filled in - look at the browser while the tests are running and see if the form is actually being correctly filled in.
You have an error in another JS file causing the JS you think is processing the form not to run. This can happen because JS assets are concatenated in the test environment, allowing an error in on JS file to prevent any files concatenated after it not to be processed.
I'm building out a form on a Rails app and for one of the sections I'm getting some random text in the text field (School Group) and I'm not sure why -
This is the code for the form, am I using the wrong type of field?
<% provide :title, "Add Staff Member" %>
<%= form_for #user do |f| %>
<div class="form-group row">
<%= f.label :firstname, 'First Name', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :firstname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :nickname, 'Nickname', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :nickname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :surname, 'Last Name', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :surname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, 'Email Address', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.email_field :email, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, 'Send Welcome Email?', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= check_box_tag :send_welcome_email %>
</div>
</div>
<div class="form-group row">
<%= f.label :user_groups, 'School Group', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :user_groups, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :timezone, 'Timezone', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.time_zone_select(:timezone, nil, {default: #user.timezone}, {class: 'form-control custom-select'}) %>
</div>
</div>
<hr>
<h2>Create Password</h2>
<p><small>Password must be at least six characters long</small></p>
<div class="form-group row">
<%= f.label :password, 'New Password', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :password_confirmation, 'Confirm Password', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
</div>
</div>
<div class="actions">
<%= f.submit 'Submit', class: 'btn btn-primary' %>
</div>
<% end %>
The field for school groups can actually be left blank for the benefit of this form but I want the field there. How do I get rid of this text?
it's not some random text it might be a association in your User or #user probably column name is named same as the association name or may be a typeo.
I can't figure out the proper formatting to modify my form partial in my view to look like the bootstrap form below with a appended button like this;
<div class="col-lg-9">
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
I would like the form to post to :home and the appended button to replace the default f.submit button in a Scaffold. Here's a Scaffold form partial that I'd like to modify.
<%= form_for #anesu, :html => { :class => 'form-horizontal' } do |f| %>
<div class="control-group">
<%= f.label :home, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :home, :class => 'text_field' %>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
anesus_path, :class => 'btn' %>
</div>
<% end %>
Please guide me on how to format my code and the right methods to use
<%= form_for #anesu do |f| %>
<div class="col-lg-9">
<div class="input-group input-group-lg">
<%= f.text_field :home, :class => 'form-control' %>
<span class="input-group-btn">
<%= f.submit "Go!", :class => 'btn btn-primary' %>
</span>
</div>
</div>
<% end %>
I currently have this sign in form in a rails 4 app in which I use the form_tag helper. I'm need to add an id. I tried using <%= form_tag( :html => {:id => 'login_form'} ) do %> but I get an error.
<%= form_tag do %>
<div class="form-group">
<%= label_tag :name, 'Username:', class: "control-label" %>
<div class="controls">
<%= text_field_tag :name, params[:name], class: "form-control", size: "30", tabindex: "1" %>
</div>
</div>
<div class="form-group">
<%= label_tag :password, 'Password:' %>
<div class="controls">
<%= password_field_tag :password, params[:password], class: "form-control", size: "30", tabindex: "2" %>
</div>
</div>
<div class="form-group">
<div class="controls">
<%= submit_tag "Sign in", class:"btn btn-large", tabindex: "2" %>
</div>
</div>
<% end %>
<%= form_tag('/login', id: "login-form") do %>