erb - Rails with nested form

Question

When I submit the form it creates the new Outfitter, but it does not create a new User. In the log it says 'Unpermitted parameters: utf8, authenticity_token, first_name, last_name, email, password, password_confirmation, commit'

Modal html:(modal is in application.html.erb. Page is localhost:3000/pages/index)

<div id="popup-outfitter-signup" class="modal popup">
 <div class="modal-main rounded-10px">
 <div class="modal-title">
  Create your Outfitter<br/>
 </div><!-- end .modal-title --> 
 <%= simple_form_for :outfitter do |f| %>
 <div class="modal-message">
  <p>
  <%= label_tag :name, "Outfitter Name" %><br/>
    <%= text_field_tag :name, params[:name], class: 'input-txt rounded-2px' %>
  </p>
  <p>
    <%= label_tag :address, "Address:" %><br/>
    <%= text_field_tag :address, params[:address], class: 'input-txt rounded-2px' %>
  </p>
  <p>
    <%= label_tag :business_phone, "Phone:" %><br/>
    <%= text_field_tag :business_phone, params[:business_phone], class: 'input-txt rounded-2px' %>
  </p>

    <%= simple_fields_for :users do %>
      <p>
        <%= label_tag :first_name, "First Name" %><br/>
        <%= text_field_tag :first_name, params[:first_name], class: 'input-txt rounded-2px' %>
      </p>
      <p>
        <%= label_tag :last_name, "Last Name:" %><br/>
        <%= text_field_tag :last_name, params[:last_name], class: 'input-txt rounded-2px' %>
      </p>
      <p>
        <%= label_tag :email, "Email:" %><br/>
        <%= text_field_tag :email, params[:email], class: 'input-txt rounded-2px' %>
      </p>
      <p>
        <%= label_tag :password, "Password:" %><br/>
        <%= password_field_tag :password, params[:password], class: 'input-txt rounded-2px' %>
      </p>
      <p>
        <%= label_tag :password_confirmation, "Password Confirmation:" %><br/>
        <%= password_field_tag :password_confirmation, params[:password_confirmation], class: 'input-txt rounded-2px' %>
      </p>
    <% end %>

  <div class="button rounded-2px trans-all">
    <%= submit_tag "Signup", class: 'send-btn rounded-2px trans-all' %>
  </div>
  <br/>
 </div>
 <% end %>
 </div><!-- end .modal-main -->
</div><!-- end .modal -->

outfitters_controller.rb

def new
  @outfitter = Outfitter.new
  @outfitter.users.build
end

Answer 1

Firstly I would recommend using rails form_for or the simple_form gem if you are building a form that maps to model.

Using any of the above will allow you to use fields_for :users, which will send users_attributes to the controller.

You would also need to accepts_nested_attributes_for :users in your Outfitter model.(http://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html)

One extra step that will differ if you are using Rails 3 or Rails 4:

Rails 4: You need to allow users_attributes on your strong parameters(http://edgeapi.rubyonrails.org/classes/ActionController/StrongParameters.html)

params.require(:outfitter).permit(users_attributes: [])

Rails 3: You would have to add :users_attributes to your model's attr_accessible

class Outfitter < ActiveRecord::Base
    attr_accessible :users_attributes
    accepts_nested_attributes_for :users_attributes
    ...
end

Hope this can help you.

Edit 1 based on updated question

When using simple form you need to pass an instance of some class so it can build the for for that specific class and pass a form variable into the block:

# @outfitter will be the one you instantiated your new action
<%= simple_form_for @outfitter do |f| %>
  #form inputs go here, see next code block for more info
<% end %>

Simple form will take your @outfitter instance, check if its a record saved to the database or not and will define the url and method the for will send the data on submit based on that.

• if @outfitter is a new record(which is your case)

  • form url will point to '/outfitters'
  • method will be POST
  • this will send the request to OutfittersController create action

• if @outfitter is not a new record(has been saved to the database and is now being updated)

  • form url will point to '/outfitter/:id(the id of the @outfitter record passed as the first simple form argument)'
  • method will be PATCH
  • this will send the request to OutfittersController update action

To create an input inside the simple_form block you do the following:

<%= simple_form_for @outfitter do |f| %>
  # f - is the form object
  # input - is the method called on the form to create the input
  # :name - is the attribute name that will be mapped to this input
  # you can only create inputs for the attributes in your class
  <%= f.input :name %>
  <%= f.input :address %>
<% end %>

• simple form will by default create the labels for the input with the name of the attribute

To create a nested form with simple form you would have to do the following

<%= simple_form_for @outfitter do |f| %>
  # calling f.simple_fields_for will ensure simple_form knows the users form is nested under outfitter form
  <%= f.simple_fields_for :users do |user_form| %>
    # user_form is the form object nested under outfitters form
    # every input method inside this block should be called on user_form
    <%= user_form.input :name %>
    <%= user_form.input :address %>
  <% end %>
<% end %>

Your complete for would be as below:

<%= simple_form_for @outfitter do |f| %>
  <div class="modal-message">
  <p>
    # input_html is used to parse attributes to be added to the input
    <%= f.input :name, input_html: { class: 'input-txt rounded-2px' } %>
  </p>
  <p>
    <%= f.input :address, input_html: { class: 'input-txt rounded-2px' } %>
  </p>
  <p>
    <%= f.input :business_phone, input_html: { class: 'input-txt rounded-2px' } %>
  </p>

  <%= f.simple_fields_for :users do |user_form| %>
    <p>
      <%= f.input :first_name, input_html: { class: 'input-txt rounded-2px' } %>
    </p>        
    <p>
      <%= f.input :last_name, input_html: { class: 'input-txt rounded-2px' } %>
    </p>
    <p>
      <%= f.input :email, input_html: { class: 'input-txt rounded-2px' } %>
    </p>
    <p>
      <%= f.input :password, input_html: { class: 'input-txt rounded-2px' } %>
    </p>
    <p>
      <%= f.input :password_confirmation, input_html: { class: 'input-txt rounded-2px' } %>
    </p>
  <% end %>

  <div class="button rounded-2px trans-all">
    <%= f.submit 'Signup', class: 'send-btn rounded-2px trans-all' %>
  </div>
<% end %>

There is much more you can do with simple form, make sure you go to their github repo and read the docs.

Enjoy