1

For a personal invoicing app in rails I could use some advice on the following: In a new invoice form, how to dynamically add a new row consisting of a collection_select for products and an associated text_field for amount by clicking add new product?

Since one invoice has many products and a product has many invoices, I figured this is a HABTM relationship both ways. Therefore I have created the tables invoices, products, and their join table invoices_products.

I would like the invoices/new page to have a form where a user can use a collection_select to pick a product (all products are already preloaded in the products table) and fill in the amount in a text field behind it. A user should be able to duplicate these two fields (collection_select and text_field) by clicking add new product, something like RailsCast #403 Dynamic Forms 04:50.

Now how would I go about doing that? And in what table would I put the data from the amount text_field, since there are multiple products per invoice so multiple amounts?

Any answer in the right direction will be greatly appreciated!

tashuhka
  • 5,028
  • 4
  • 45
  • 64
Jaakko
  • 66
  • 1
  • 5

1 Answers1

0

This depends on how many additional fields you want

A good tutorial for this can be found here

Ajax

The right way would be to add the element dynamically with Ajax

This is tricky because it means you're not going to have the form_builder object available for the dynamically added items. Regardless, you can still do it with this code:

#config/routes.rb
get "new_field_path", to: "invoices#new_item"

#app/views/controller/index.html.erb
<%= ... form %>
<%= link_to "Add Field", new_field_path, remote: :true %>

Controller

#app/controllers/invoices_controller.rb
def new_item
   @invoice = Invoice.new
   @invoice.products.build
   render "new_item", layout: false
end

#app/views/invoices/new_item.html.erb
<%= form_for @invoice do |f| %>
    <%= render partial: "products_fields", locals: { f: f } %>
<% end %>

#app/views/invoices/_products_fields.html.erb
<%= f.fields_for :products, child_index: Time.now.to_i do |p| %>
    <%= p.text_field :name %>
<% end %>

Form

#app/views/invoices/new.html.erb
<%= form_for @invoice do |f| %>
   <%= render partial: "products_fields", locals: { f: f } %>
   <%= link_to "Add Field", new_field_path, remote: :true %>
   <%= f.submit %>
<% end %>
Richard Peck
  • 76,116
  • 9
  • 93
  • 147