loading...

Beginners Guide to form_for in Rails

maylenepoulsen profile image Maylene Poulsen ・3 min read

If you are new to building apps in Rails and using the views to display forms, these are a few simple explanations of selection options you may to incorporate into your form_for.

The form_for form is usually created in a

_form.html.erb

file an rendered in the "new.html.erb" or "edit.html.erb" using

<%= render 'form' %>

The first line of a form_for looks like this:

<%= form_for @student do |f| %>

This form takes in an instance of a student. In the StudentsController, a variable "@student" is passed to the form to create a new student. A new student is created in the controller with all the attributes set to "nil" before the form has been submitted.

class StudentsController < ApplicationController
  def new
    @student = Student.new
  end
end

You might want to add some labels and text_fields for someone to enter in the information.

 <%= form_for @student do |f| %>
    <%= f.label "Student Name: " %>
    <%= f.text_field :name %>

    <%= f.label "Enter a username: " %>
    <%= f.text_field :username %>

    <%= f.label "Student's Grade: " %>
    <%= f.number_field :grade %>

If you would like to add a way for someone to select items from a dropdown list you can use collection_select

 <%= f.label "Select Your School: " %>
 <%= f.collection_select(:school_id, School.all, :id, :name) %>

The ":school_id" is an attribute of a Student. Whatever option someone selects from this dropdown will be assigned to this attribute.

"School.all" is the collection of school instances that will be available to select in the dropdown. They are selected using the school's assigned ":id", but we want to display the ":name" attribute (of the school, rather than the ":id") in the dropdown. (Note, for this code snippet it doesn't slide over enough to see the end embedded ruby tag but it is still very necessary.)

 <%= f.label "Select the subjects you are Studying: " %>
    <%= f.collection_check_boxes(:subject_ids, Subject.all, :id, :name, include_hidden: false) %>

This allows someone to check boxes and those selections will be added to an array when you call @student.subjects = [ ]. "Collection_check_boxes" are similar to "collect_select" but there is the last field "include_hidden: false".
The "include_hidden: false" is added so that the first element in the array when @student.subjects is called is not an empty string ie.

["", "Math", "Art", "Chemistry"]

In the StudentsController you will have to modify the params that are permitted by setting "subject_ids:" to an empty array. (Note, for this code snippet I did not write out every attribute that was being permitted but they should listed where the . . . are)

class StudentsController < ApplicationController
 private

  def student_params
    params.require(:student).permit(:name, ..., :subject_ids => [])
  end
end

Last but not least do not forget

    <%= f.submit %>
  <% end %>

"f.submit" creates the button in the view that allows someone to submit the information entered or selected and create a new instance of @student. The completed form_for looks like this.

<%= form_for @student do |f| %>
    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :username %>
    <%= f.text_field :username %>

    <%= f.label :select_a_school %>
    <%= f.collection_select(:school_id, School.all, :id, :name) %>

    <%= f.label :grade %>
    <%= f.number_field :grade %>

    <%= f.label :select_subjects %>
    <%= f.collection_check_boxes(:subject_ids, Subject.all, :id, :name, include_hidden: false) %>

    <%= f.submit %>
  <% end %>

Don't forget to use the embedded ruby with the equals sign

<%=   %>

on every line of the form except for the "end".

<% end %>

Once the form is submitted, all the information about "@student" collected from the form will be sent to the create action in the StudentsController for validations and saving the new "@student" to the database!

Posted on by:

maylenepoulsen profile

Maylene Poulsen

@maylenepoulsen

Software Developer interested in JavaScript + React + Node

Discussion

pic
Editor guide