Search code examples
ruby-on-railsrubyruby-on-rails-5.2

Send array of keys using dynamic fields_for


I need a way to send an array of keys using fields_for. The only problem is I am building dynamic fields using some javascript code. Let me share me code

todos/_form.html.erb

<%= form_for(@todo_list) do |f| %>

  <div class="form-inputs">
    <%= f.text_field :name %>
  </div>

  <table class='table'>
    <thead>
      <tr>
        <th>Complete List</th>
        <th>Name</th>
        <th>option</th>
      </tr>
    </thead>
    <tbody class='fields'>
      <%= f.fields_for :tasks do |builder| %>
        <tr>
          <td>
            <%= f.hidden_field :_destroy %>
            <%= link_to 'Delete', '#', class: 'remove_record' %>
          </td>
          <td><%= f.text_field :completed %></td>
          <td>
            <%= f.select :name, [['ANiket','aniket'],['Shivam','shivam']], include_blank: 'Select a Group', class: 'form-control' %>
          </td>
          <td><%= f.text_field :option %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <div class="form-actions">
    <%= f.button :submit %>
    <%= link_to_add_row('Add Task', f, :tasks, class: 'btn btn-primary') %>
  </div>
<% end %>

application_helper.rb

module ApplicationHelper
   def link_to_add_row(name, f, association, **args)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize, f: builder)
    end
    link_to(name, '#', class: "add_fields " + args[:class], data: {id: id, fields: fields.gsub("\n", "")})
  end
end

My js code

  $(document).on('click', '.remove_record', function(event) {
    $(this).prev('input[type=hidden]').val('1');
    $(this).closest('tr').remove();
    return event.preventDefault();
  });

  $(document).on('click', '.add_fields', function(event) {
    var regexp, time;
    time = new Date().getTime();
    regexp = new RegExp($(this).data('id'), 'g');
    $('.fields').append($(this).data('fields').replace(regexp, time));
    return event.preventDefault();
  });

So, currently, the options field is an array in my case. Right now the fields are forming like below

 <input type="text" name="todo[tasks_attributes][1566716366848][completed]" id="todo_tasks_attributes_1566716366848_completed">

    <input type="text" name="todo[tasks_attributes][1566716366848][option]" id="todo_tasks_attributes_1566716366848_option">

So, I need a way to send option field as an array of keys


Solution

  • After spending a lot of time I found the solution. If you explore the form_object which is f in my case there I found object_name field which holds the data.

    <%= f.text_field :option, name: f.object_name + "[option][]"  %>
    

    So, it will give me this

    <input name="todo[tasks_attributes][1566716366848][option][]" type="text" value="" id="todo_tasks_attributes_1566716366848_option">