dynamically add fields to nested form onchange of select

Question

i am adding and removing fields successfully on click to add_fields and remove_fields. But now i want to add fields N times at once depending on the value of drop down in the parent form. How to do it any idea? here is my parent form

= f.select :total_section, (0..10),{}, :onchange => "generate_form(this.value)"
    .field
      = f.fields_for :score_sheet_sections do |s|
        %div.fields
          = render 'score_sheet_section_fields', :f => s
      %div.fields
        = link_to_add_fields "Add Score Sheet Sections", f, :score_sheet_sections

In my generate form function i only have this:

function generate_form(number) {
      for (i = 1; i <= number; i++) {
          console.log(i);
      }
  }

i want to select number of sections(say N or store it in N) and then add score_sheet_sections N times

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

select number of sections(say N or store it in N) and then add score_sheet_sections N times)

I don't know how you're handling this currently, but if you're using a similar method to this (I.E using Ajax to call a separate method) , you may wish to include an argument in the method which allows you to return the number of rows depending on the argument, like so:

--

Route

#config/routes.rb
resources :controller do
   collection do
      get :new_field
   end
end

--

Controller

#app/controllers/your_controller.rb
respond_to :js, only: :new_field

def new_field num = 1 #-> arg defaults to 1
   num = params[:num] if params[:num]

   @model = Model.new
   @model.nested_categories.build

   render "controller/form", num: num
end

#app/views/controller/new_field.html.erb
<%= form_for @model do |f| %>
    <%= render partial: "field", locals: { num: parmas[:num], f: f } %>
<% end %>

#app/views/controller/_field.html.erb
<% num.each do |i| %>
    <%= f.fields_for :association, child_index: Time.now.to_i do |a| %>
         <%= a.text_field :attribute %>
    <% end %>
<% end %>

--

** JS **

= f.select :total_section, (0..10),{}, :onchange => "generate_form(this.value)"

#app/assets/javascripts/application.js.erb
var generate_form = function( num ){
   $.ajax({
       url: "new_fields/?num=" + num,
       type: "GET",
       success: function(data) {
           //append returned data to view
       }          
   })
}

According to this SO post, you can append data to the URL in a GET request

This will return a built form to your ajax request, allowing you to parse it & append to the view

edited May 23 '17 at 11:57

Community

1
1

answered May 26 '14 at 06:37

Richard Peck

76,116
9
93
147

Sorry you misunderstand - you mentioned you have the javascript working. I intended my code to be integrated *into* your javascript - I can post more JS code if you want? – Richard Peck May 26 '14 at 06:41
yeah please that would be more helping – Abdul Baig May 26 '14 at 06:42
Several issues! 1. in the ajax `url`, we need to just have `url: "add_fields"` 2. in the ajax `data`, we need to have `{num: num}` – Richard Peck May 26 '14 at 07:14
I am working on it as much as i can. so i don't want to disturb you for much time – Abdul Baig May 26 '14 at 07:20
lol I do apologize (it' morning here!) At least they're populating with the right data - let me try again – Richard Peck May 26 '14 at 07:21
Updated again for you – Richard Peck May 26 '14 at 07:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54415/discussion-between-g-b-and-rich-peck). – Abdul Baig May 26 '14 at 07:28

score 1 · Answer 2 · answered May 26 '14 at 06:19

1

Just follow this railscasts tutorial to add and remove the nested resources fields http://railscasts.com/episodes/197-nested-model-form-part-2?view=asciicast, http://railscasts.com/episodes/196-nested-model-form-revised?view=comments.

If need more help please let me know.

answered May 26 '14 at 06:19

Mohanraj

4,056
2
22
24

i have followed the tutorials and succeeded. But i want to select number of sections(say N or store it in N) and then add score_sheet_sections N times. – Abdul Baig May 26 '14 at 06:21

dynamically add fields to nested form onchange of select

2 Answers2