In this blog, I'll show how to create complex forms in Rails 4,
where one can "add fields on the fly" by using JavaScript.
This issue on how to "add fields on the fly" inspired me
when I was learning how to create complex forms by using Ruby on Rails.
While learning, I went through the Rails Guide which covers
complex forms
creation in detailed way, apart from
showing how to
"add fields on the fly".
"Adding fields on the fly" is not covered fully,
as it's not directly supported by Rails, because
it involves the usage of JavaScript. Well, I was
intrigued by this issue, and I wanted to know how
to mix JavaScript with complex forms creation.
Following Peter Rhoades'
excellent article's steps, I decided to approach
this issue from the very start, step-by-step: First, I'll create the rails project,
and then create the Person and Address models used in this sample.
After that I'll update _form partial
that is used for Person and Address creation.
Finally, some JavaScript is added to the project to allow "adding fields on the fly", which
also makes a more interactive look to the page.
About the models, the Person model can have many Addresses, and the Address model belongs to one Person model. By the way, those models are identical to the ones that are presented in the Rails Guide; only the JavaScript part is new. If you want to see JavaScript right away, you can advance directly to the second section of this blog. The source code for this blog is available at GitHub.
Preparation
Okay, lets start by creating a new rails project on command line:
rails new nested_forms
Then install the gems in the project bundle:
cd nested_forms
bundle install
Then generate scaffold for Person, and generate model for Address:
rails generate scaffold Person name
rails generate model Address kind street person_id:integer
Finally migrate those new models into database
bundle exec rake db:migrate
Then update your Person model by adding association:
has_many :addresses.
Add also line accepts_nested_attributes_for :addresses
to allow Address creation in the same controller where the Person is created.
Ruby on Rails API says:
"Nested attributes allow you to save attributes on associated records through the parent."
And like mentioned in the Rails Guide:
"This creates an addresses_attributes=
method on Person that allows you to create,
update and (optionally) destroy addresses."
# file: app/models/person.rb
class Person < ActiveRecord::Base
has_many :addresses
accepts_nested_attributes_for :addresses
end
Next add belongs_to :person association to
the generated Address model:
# file: app/models/address.rb
class Address < ActiveRecord::Base
belongs_to :person
end
Then update People controller's strong parameters in method person_params.
This allows Address creation at the same time when Person is created.
Also update the new action to so
that it builds two Addresses for new Person.
# file: app/controllers/people.rb
class PeopleController < ApplicationController
def new
@person = Person.new
2.times { @person.addresses.build }
end
....some code left out....
def person_params
params.require(:person).permit(:name,
:addresses_attributes => [:id, :kind, :street])
end
end
class PeopleController < ApplicationController
before_action :set_person, only: [:show, :edit, :update, :destroy]
# GET /people
# GET /people.json
def index
@people = Person.all
end
# GET /people/1
# GET /people/1.json
def show
@addresses = @person.addresses
end
# GET /people/new
def new
@person = Person.new
2.times { @person.addresses.build}
end
# GET /people/1/edit
def edit
end
# POST /people
# POST /people.json
def create
@person = Person.new(person_params)
respond_to do |format|
if @person.save
format.html { redirect_to @person, notice: 'Person was successfully created.' }
format.json { render action: 'show', status: :created, location: @person }
else
format.html { render action: 'new' }
format.json { render json: @person.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /people/1
# PATCH/PUT /people/1.json
def update
respond_to do |format|
if @person.update(person_params)
format.html { redirect_to @person, notice: 'Person was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: 'edit' }
format.json { render json: @person.errors, status: :unprocessable_entity }
end
end
end
# DELETE /people/1
# DELETE /people/1.json
def destroy
@person.destroy
respond_to do |format|
format.html { redirect_to people_url }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_person
@person = Person.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def person_params
params.require(:person).permit(:name, :addresses_attributes => [:id, :kind, :street])
end
end
Finally add fields_for, label
and text_field
form helpers and some text for adding Address to the _form partial:
# file: app/views/people/_form.html.erb
Addresses:
<ul>
<%= f.fields_for :addresses do |addresses_form| %>
<li>
<%= addresses_form.label :kind %>
<%= addresses_form.text_field :kind %>
<%= addresses_form.label :street %>
<%= addresses_form.text_field :street %>
</li>
<% end %>
</ul>
<div class="actions">
<%= f.submit "Create Person and Addresses" %>
</div>
<%= form_for(@person) do |f| %>
<% if @person.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@person.errors.count, "error") %>
prohibited this person from being saved: </h2>
<ul>
<% @person.errors.full_messages.each do |msg| %>
<li><%= msg %> </li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
Addresses:
<ul>
<%= f.fields_for :addresses do |addresses_form| %>
<li>
<%= addresses_form.label :kind %>
<%= addresses_form.text_field :kind %>
<%= addresses_form.label :street %>
<%= addresses_form.text_field :street %>
</li>
<% end %>
</ul>
<div class="actions">
<%= f.submit "Create Person and Addresses" %>
</div>
<% end %>
Now if you want to create a new Person, then you can also create two Addresses at the same time:
Click on the image to enlarge
If you look at the generated source code below and the created Address elements, you can see that the hash key that is used for identifying an Address is an integer, and starts from 0; the second Address is identified with a hash key of 1. I have used Chrome's Developer Tools for viewing those elements below. No user entered data is shown in this view, because the form hasn't been submitted yet.
Click on the image to enlarge
Now if you submit the data, you have created two Addresses for Person, who in this case is Bart. Whenever you want to create a Person, then those two Address fields are shown each time. Therefore, the people/new page is a bit static at the moment, but let's change that by allowing "Adding Fields on the Fly" functionality.
"Adding Fields on the Fly"
As shown previously the key value for the Address hash is created incrementally
by using integer numbers such as 0 and 1. This means that the addresses that are created
are unique. In our sample we aren't going to increment integers for hash keys
(although I think it could work);
instead let's follow the Rails Guide:
"When generating new sets of fields you must ensure the key of the associated array is unique
- the current JavaScript date (milliseconds after the epoch) is a common choice."
So let's use JavaScript
Date object in place of added integer values.
Now we are going to make JavaScript code that creates the Address
elements shown before and uses JavaScript Date
object in place of 0 and 1 values for
keys. Also those elements can only be displayed and created on
the form after clicking an "Add address" button like shown below:
Click on the image to enlarge
After two "Add address" button clicks and some user entered information we get the following view:
Click on the image to enlarge
To get the functionality that was shown in the two screenshots above,
and to make JavaScript changes that were mentioned earlier,
we need to add some JavaScript to our project.
Let's add a JavaScript function called addAddressField
to app/assets/javascripts folder in a file called people.js.
Main parts of the function code is highlighted below. You
can also view the full code by clicking the link View Full Code.
# file: app/assets/javascripts/people.js
function addAddressField() {
//create Date object
var date = new Date();
//get number of milliseconds since midnight Jan 1, 1970
//and use it for address key
var mSec = date.getTime();
//Replace 0 with milliseconds
idAttributKind =
"person_addresses_attributes_0_kind".replace("0", mSec);
nameAttributKind =
"person[addresses_attributes][0][kind]".replace("0", mSec);
//create <li> tag
var li = document.createElement("li");
....some code left out....
//create input for Kind, set it's type, id and name attribute,
//and append it to <li> element
var inputKind = document.createElement("INPUT");
inputKind.setAttribute("type", "text");
inputKind.setAttribute("id", idAttributKind);
inputKind.setAttribute("name", nameAttributKind);
li.appendChild(inputKind);
....some code left out....
//add created <li> element with its child elements
//(label and input) to myList (<ul>) element
document.getElementById("myList").appendChild(li);
//show address header
$("#addressHeader").show();
}
View Full Code
function addAddressField() {
//create Date object
var date = new Date();
//get number of milliseconds since midnight Jan 1, 1970
//and use it for address key
var mSec = date.getTime();
//Replace 0 with milliseconds
idAttributKind =
"person_addresses_attributes_0_kind".replace("0", mSec);
nameAttributKind =
"person[addresses_attributes][0][kind]".replace("0", mSec);
idAttributStreet =
"person_addresses_attributes_0_street".replace("0", mSec);
nameAttributStreet =
"person[addresses_attributes][0][street]".replace("0", mSec);
//create <li> tag
var li = document.createElement("li");
//create label for Kind, set it's for attribute,
//and append it to <li> element
var labelKind = document.createElement("label");
labelKind.setAttribute("for", idAttributKind);
var kindLabelText = document.createTextNode("Kind");
labelKind.appendChild(kindLabelText);
li.appendChild(labelKind);
//create input for Kind, set it's type, id and name attribute,
//and append it to <li> element
var inputKind = document.createElement("INPUT");
inputKind.setAttribute("type", "text");
inputKind.setAttribute("id", idAttributKind);
inputKind.setAttribute("name", nameAttributKind);
li.appendChild(inputKind);
//create label for Street, set it's for attribute,
//and append it to <li> element
var labelStreet = document.createElement("label");
labelStreet.setAttribute("for", idAttributStreet);
var streetLabelText = document.createTextNode("Street");
labelStreet.appendChild(streetLabelText);
li.appendChild(labelStreet);
//create input for Street, set it's type, id and name attribute,
//and append it to <li> element
var inputStreet = document.createElement("INPUT");
inputStreet.setAttribute("type", "text");
inputStreet.setAttribute("id", idAttributStreet);
inputStreet.setAttribute("name", nameAttributStreet);
li.appendChild(inputStreet);
//add created <li> element with its child elements
//(label and input) to myList (<ul>) element
document.getElementById("myList").appendChild(li);
//show address header
$("#addressHeader").show();
}
The above JavaScript creates new <li> element, two labels, and two input elements for Address entries, which are then appended on to <ul> element of the form. Also an address header is made visible by using jQuery.
For id attribute values you don't have
to use that long:
person_addresses_attributes_sth_kind format;
it can be something more shorter, for instance a plain integer. However,
the format of the name
attribute value has to look like to original one:
person[addresses_attributes][sth][kind]; otherwise the data won't be
saved in the controller. Like said in the
Ruby Rails Tutorial book,
by Michael Hartl: "These name values allow Rails
to construct an initialization hash (via the params variable)
for creating users using the values entered by the user."
In our case Person and Addresses are being created based on the values
entered by the user.
Finally, let's make some changes
to the _form partial,
so that it uses addAddressField function.
Now we can remove the fields_for helper and the code
within fields_for helper method,
and add submit_tag and Address header to get the functionality we need.
The changes are small and are highlighted below.
# file: app/views/people/_form.html.erb
<% submit_tag "Add address", :type => "button", :id => "addAddress", :onclick => 'addAddressField()'%>
<br />
<div id="addressHeader" style="display:none">
Address information:
</div>
<br />
<ul id="myList">
</ul>
<div class="actions">
<%= f.submit "Create Person and Addresses" %>
</div>
<%= form_for(@person) do |f| %>
<% if @person.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@person.errors.count, "error") %>
prohibited this person from being saved: </h2>
<ul>
<% @person.errors.full_messages.each do |msg| %>
<li><%= msg %> </li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<%= submit_tag "Add address", :type => 'button', :id => 'addAddress',
:onclick => 'addAddressField()' %>
<br>
<div id="addressHeader" style="display:none">Address information: </div>
<br>
<ul id="myList">
</ul>
<div class="actions">
<%= f.submit "Create Person and Addresses" %>
<div>
<% end %>
Now if you look at the generated source code again and the created Address elements, you can
see that the hash key that is used for identifying an Address
are the milliseconds from the JavaScript Date object.
Click on the image to enlarge
Finally we can create People and their Addresses by "Adding Fields on the Fly".
