Ruby on Rails form input - ruby-on-rails

How does Ruby on Rails auto generate the forms input? I've come across the following code and have no idea how the HTML below is being rendered.
<%= f.input :first_name %>
Renders:
<div class="input string required"><label for="user_first_name" class="string required"><abbr title="required">*</abbr> First name</label><input type="text" value="Paul" size="30" required="required" name="user[first_name]" maxlength="255" id="user_first_name" class="string required"></div>

The HTML is generated by the Rails form helpers. Rails gives you a bunch of methods to make it easier to generate form markup so you don't have to worry about naming and typing out all of the attributes every time. Checkout that link to the docs to get more familiar.

In addition to what Chris said, the code f.input probably comes from either formtastic or simple_form. They're gems used to output a preset template using minimal code so you might want to check those.

Related

Convert html input to erb

How can I convert this:
<input type="file" id="file" name="file">
To a Rails input, if I can say it that way and if I change it to a Ruby input do I have to change anything in my JS code? Is there any benefits on using the code this way or can I use the html way?
Try this
<%= file_field_tag 'file' %>
It will generate this HTML
<input id="file" name="file" type="file" />
More info - Rails Form Helper file_field_tag
You can use it in raw html as well, but when you are using Rails, its recommended to follow the conventions.

How change simple_form input html tag

Hollow, I need to change input html tag for vue component.
In default config simple_form work like this
= f.input_field :name
<input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text">
But i need change to
= f.input_field :name
<vue-input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text"></vue-input>
Have you considered just using raw HTML in your view? You are not required to use f.input_field :name.
You could just directly write:
<vue-input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text"></vue-input>
You could also write your own HTML helper, see this question.
I don't think that will be possible easily as they are predefined to be used with Rails. You'll have to create new or monkey patch these methods to behave as intended.

Rails Simple Form font awesome instead of radio buttons breaks form validation flow

I’m building a form now with Rails & Simple_form with validations on the model. In the form I have several collections of radio buttons.
For each of the radio buttons I’m hiding the actual button and adding a font awesome icon. I’ve tried this with f.collection_radio_buttons and by just replacing the simple_form f.input tag with the plain HTML it would otherwise generate. However, after form validation I can only get the values to return and the error messages to display when I stick to this format:
<%= f.input field_value, label: false, as: :radio_buttons, collection: [1,2,3,4,5] %>
It seems that almost any changes I make to the default radio button causes it to be excluded from the form validation flow. Values are being sent correctly though.
Basically, the form works, values are being retained even after validation failure. What’s going wrong is the error messages are not being displayed and the values aren’t placed back in their fields, so they’re not visible
Basically what I want is a fontawesome icon instead of a radio button, I get the feeling a lot of people have done this before but I can't seem to find many resources online regarding this.
Below is a rough example of the HTML/ERB I was experimenting with. With this the form works, icons are displayed and all seems pretty great until the form is re-rendered after validation failure. Then the values are loaded back into the field, but not displayed for these fields. Any validation errors are also not displayed.
<div class="form-group radio_buttons required rating_<%= field_value.to_s %>">
<input type="hidden" name="rating[<%= field_value.to_s %>]" value="">
<% (1..5).to_a.each do |number| %>
<span class="radio">
<label for="rating_<%= field_value.to_s %>_<%= number %>" id="<%= number %>" data-target=".rating_<%= field_value.to_s %>">
<input class="radio_buttons optional" type="radio" value=<%= number %> name="rating[<%= field_value.to_s %>]" id="rating_<%= field_value.to_s %>_<%= number %>">
<i class="fa fa-star fa-2x"></i>
</label>
</span>
<% end %>
</div>

Interpolating ERB as an HTML value attribute (Rails)

I am attempting to pass data as params in a hidden input tag's value attribute:
<input name="quote[destination]" value= <%= "#{quote["InboundLeg"]["OriginCity"]}" %> type="hidden" />
When the form is submitted, the params contains the first word of the string being interpolated and drops everything after the first space.
If I decide to pass through an ordinary string to params through value like so:
<input name="quote[destination]" value= "foo bar buzz" type="hidden" />
the entirety of the string passes through unlike the former case. Can anyone shed some light on why this may be and some possible solutions?
Change that line to:
<input name="quote[destination]" value="<%= quote["InboundLeg"]["OriginCity"] %>" type="hidden" />
Note that the quotes are outside of the ERB statement.
Or you might want to use the hidden_field_tag form helper which creates such hidden input fields and reads nicer:
<%= hidden_field_tag 'quote[destination]', quote["InboundLeg"]["OriginCity"] %>
I would always use a helper if I have a choice because IMHO is a bad practice to mix HTML and ERB like in the first example.
Replace your input tag with
<input name="quote[destination]" value= "<%= quote['InboundLeg']['OriginCity'] %>" type="hidden" />
You have to apply quotes to the value

Rails button_to for Custom Name / Value Submit

In Rails is it possible to achieve an HTML output like this using button_to?
<button type="submit" value="1" name="id">Type 1</button>
<button type="submit" value="2" name="id">Type 2</button>
What are the reasons for using button_to over manually entering the HTML in my form?
...
EDIT:
Perhaps I should rephrase this? Seems the better way would be to add some hidden fields to the button_to form. It doesn't seem like I can do this.
So what is the correct Rails solution to pass extra hidden fields to a dynamic form generated via a button_to? Or should I just build a form manually?
e.g. I have:
button_to "Download", items_path(:release_id => release), :remote => true
and I want to pass an extra parameter in the form POST format => "download"
Seems my answer was to use the form_tag helper

Resources