I am new in RoR. I am trying to add css classes on my form. Here is my form:
<%= form_tag :action => 'create' do %>
<p><label for = "name">Name</label>:
<%= text_field 'books', 'name' %></p>
<div class="form-control">
<p><label for = "author">Author</label>:
<%= text_field 'books', 'author'%></p>
</div>
<p><label for = "price">Price</label><br/>
<%= text_area 'books', 'price'%></p>
<%= submit_tag "Create" %>
<% end -%>
That form controls does not accepting class="form-control mb-4 col-10" placeholder="Patient name" like <input type="text" th:field="*{name}" class="form-control mb-4 col-10" placeholder="Patient name">. How can I apply css styling.
You have to put the class behind a comma
<%= text_field 'books' :name, class:"form-control mb-4 col-10", placeholder="Patient name" %>
Related
For some reason when executing this code, the radio buttons that get created aren't mutually exclusive in getting picked. How do I make it so that users can only pick 1 radio button? This code is essentially going through a variety of addresses and allowing a user to pick an address for their order.
<div class="select-address select-address-row" style="display:none">
<% #order.user.addresses.each do |address, index| %>
<%= form_for #order, remote: true, :html => { :id => 'address-form-'+address.id.to_s} do |a| %>
<div class="col-xs-4 select-address-col">
<div class="enterprise-buy-address-box address-<%= address.id %>">
<%= address.shipping_name %><br>
<%= address.line_1 %><br>
<%= address.city %>, <%= address.state %> <%= address.zipcode %><br>
<% isDefault = address.shipping_name == #defaultAddress.shipping_name ? true : false %>
<%= a.radio_button :pickedAddress, 'Address', :checked => isDefault %>
<%= label :pickedAddress, '' %>
<div class="submit-address">
<%= button_tag(type: 'submit', class: "btn btn-xs btn-default address-custom-button-select address-"+address.id.to_s+"-button") do %>
select
<% end %>
</div>
</div>
</div>
<%= a.hidden_field :address_id, :value => address.id %>
<% end %>
<script>
$('.address-<%=address.id%>-button').click(function() {
$('.default-address').empty();
var selectedAddress = $('.address-<%=address.id%>').clone();
selectedAddress.find('.submit-address').remove();
$('.default-address').append(selectedAddress);
$('default-address').addClass("enterprise-buy-address-box");
$('.default-address').show();
$('.select-address').toggle();
$('.change-address-link').toggle();
});
</script>
<% end %>
</div>
Your form_for tag is inside of the loop for the addresses. Even if the name attribute is the same for all of your input type="radio" elements, they will not be mutually exclusive across different form elements. Move your form_for tag outside of the loop so that the radio inputs belong to the same form.
See the following snippet for demonstration:
<p>These won't work</p>
<form>
<input type="radio" name="foo">
</form>
<form>
<input type="radio" name="foo">
</form>
<p>These do work</p>
<form>
<input type="radio" name="bar">
<input type="radio" name="bar">
</form>
if #challenge.name == 'foo'
#challenge.category = 'habit'
#challenge.days_challenged = 21
#challenge.why = 'bar'
else
:days_challenged & :why are properly being set in the _form for foo but not :category.
<div class="challenge-category">
<input class="date-format-switcher" type="radio" value="goal" name="challenge[category]" id="challenge_category_goal">
<label for="challenge_category_goal">Goal</label>
<input class="date-format-switcher" type="radio" value="habit" name="challenge[category]" id="challenge_category_habit">
<label for="challenge_category_habit">Habit</label>
</div>
<%= f.number_field :days_challenged, class: 'day-challenge' %>
<%= f.text_area :why %>
I assume you are purposefully custom-coding your radio buttons. The selected radio button should have the attribute "checked", i.e.
<input class="date-format-switcher" type="radio" value="habit"
name="challenge[category]" id="challenge_category_habit" checked />
To set dynamically:
<%= f.radio_button :category, 'goal', class: 'date-format-switcher' %>
<%= f.radio_button :category, 'habit', class: 'date-format-switcher' %>
I am trying to create a form using the following view file
<%= form_for :spec do |form| %>
<fieldset>
<legend><%= #title %></legend>
<%= text_field_for form, "first_name" %>
<%= text_field_for form, "last_name" %>
<div class="form_row">
<label for="gender">Gender: </label>
<%= radio_button :spec, :gender, "Male" %> Male
<%= radio_button :spec, :gender, "Female" %> Female
<%= radio_button :spec, :gender, "Other" %> Other
</div>
<div class="form_row">
<label for="birthdate">Birthdate:</label>
<%= date_select :spec, :birthdate,
:start_year => Spec::START_YEAR,
:end_year => Time.now.year,
:include_blank => true,
:order => [:month,:day,:year] %>
</div>
<%= text_field_for form, "occupation" %>
<%= text_field_for form, "city" %>
<%= text_field_for form, "state" %>
<%= text_field_for form, "zip_code", Spec::ZIP_CODE_LENGTH %>
<%= submit_tag "Update", :class => "submit" %>
</fieldset>
<%end%>
And I am using the following helper method
def text_field_for (form, field,
size=HTML_TEXT_FIELD_SIZE,
maxlength=DB_STRING_MAX_LENGTH)
label = content_tag("label","#{field.humanize}:", :for => field)
form_field = form.text_field field, :size => size, :maxlength => maxlength
content_tag("div", "#{label} #{form_field}", :class => "form_row")
end
However, my output gives HTML code for
<label for="first_name">First name:</label> <input id="spec_first_name" maxlength="255" name="spec[first_name]" size="15" type="text" />
<label for="last_name">Last name:</label> <input id="spec_last_name" maxlength="255" name="spec[last_name]" size="15" type="text" />
instead of textfields and labels
Can anyone suggest a solution for this?
Update text_field_for method as below:
def text_field_for (form, field,
size=HTML_TEXT_FIELD_SIZE,
maxlength=DB_STRING_MAX_LENGTH)
label = content_tag("label","#{field.humanize}:", :for => field)
form_field = form.text_field field, :size => size, :maxlength => maxlength
content_tag "div", label + form_field, :class => "form_row"
end
You were treating the label and form_field as String. You shouldn't be interpolating them.
I have a form with several fields (many of which are datepicker fields) and only three of them show these weird artifacts
Here are the same fields in Chrome, but it appears the same on every other browser... including Safari on Windows (on a different computer, not a VM or parallels)
Here is the relevant code:
<legend>Delivery Information</legend>
<div class="form-group">
<%= f.label :start_date,
"Start Date <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :start_date, class: "form-control datepicker",
required: false,
value: (model.start_date.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
<div class="form-group">
<%= f.label :end_date,
"End Date <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :end_date, class: "form-control datepicker",
required: false,
value: (model.end_date.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
<div class="form-group">
<%= f.label :last_day_of_classes,
"Last Day of Classes <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :last_day_of_classes, class: "form-control datepicker",
required: false,
value: (model.last_day_of_classes.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
model is just because this is a shared form.
I have no idea why these fields are displaying this way... any ideas?
So. By changing the class name from datepicker to pickerDates on those three fields the carets have disappeared. I don't know why or how.
I'm using Devise for user registration. It automatically gives me the form for a new session:
<%= form_for(resource_name, resource, :url => session_path(resource_name)) do |f| %>
.
.
.
<% end %>
I have the email and password label and fields like so:
<div class = "field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class = "field">
<%= f.label :password %><br />
<%= f.password_field :password %>
</div>
But I'd like to add a class the the text_field and password_field so that I can style the boxes to make them look better.
<%= f.text_field :email, :class => "whatever" %>
did not work, so I looked in the Rails API and found a text_field method and did this:
<%= text_field(:user, :email, :class => "whatever" ) %>
which leaves out the "f" called in "form_for...do |f|". Even so, I'm pretty sure it worked because when I "View Source", the output ("id" and "name") matches:
<div class = "field">
<label for="user_email">Email</label><br />
<input id="user_email" name="user[email]" size="30" type="text" value="" />
</div>
<div class = "field">
<label for="user_email">Email</label><br />
<input class="whatever" id="user_email" name="user[email]" size="30" type="text" value="" />
</div>
This all seems great that it works and the source looks like it's fine, but I just want to get some confirmation from some more experienced developers to make sure that this definitely works and that there is nothing behind the scenes that is wrong before I make the change and have problems later.
Something else is wrong in your code.
<%= f.text_field :email, :class => "whatever" %>
Does what you want: you don't need to specify the user model, because the form builder (the f) knows which model it's dealing with.
For more info, read the introduction paragraph here: http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_field