How can I dynamically add new nested field to form via JS in Rails?

Question

I have model Post which has_many :relics and Relic which belongs_to :post. I have new post form, from where I can create Post's relics (multiple) as well (it works):

From new action in posts_controller.rb:

@post_relics = [@post.relics.build]*2

From _form.html.haml:

= f.fields_for :relics, @post_relics do |r|
  .more.group
    .photo
      = link_to 'Insert photo', '#', data: {toggle: 'upload'}
      = r.file_field :photo, accept: 'image/*'
    .fileds
      = r.label :title
      = r.text_field :title
      = r.label :description
      = r.text_field :description

My goal is to add 'Add more' button which will provide copy of .more div with valid input names and ids, how can I do that?

The above code renders in:

<div class='more group'>
  <div class='photo'>
    <a data-toggle="upload" href="#">Insert photo</a>
    <input accept="image/*" id="post_relics_attributes_0_photo" name="post[relics_attributes][0][photo]" type="file" />
  </div>
  <div class='fileds'>
    <label for="post_relics_attributes_0_title">Title</label>
    <input id="post_relics_attributes_0_title" name="post[relics_attributes][0][title]" type="text" value="" />
    <label for="post_relics_attributes_0_description">Description</label>
    <input id="post_relics_attributes_0_description" name="post[relics_attributes][0][description]" type="text" value="" />
  </div>
</div>
<input id="post_relics_attributes_0_id" name="post[relics_attributes][0][id]" type="hidden" value="6" />
<div class='more group'>
  <div class='photo'>
    <a data-toggle="upload" href="#">Insert photo</a>
    <input accept="image/*" id="post_relics_attributes_1_photo" name="post[relics_attributes][1][photo]" type="file" />
  </div>
  <div class='fileds'>
    <label for="post_relics_attributes_1_title">Title</label>
    <input id="post_relics_attributes_1_title" name="post[relics_attributes][1][title]" type="text" />
    <label for="post_relics_attributes_1_description">Description</label>
    <input id="post_relics_attributes_1_description" name="post[relics_attributes][1][description]" type="text" />
  </div>
</div>

nmarsh · Accepted Answer · 2014-06-23 12:03:07Z

1

Here's a quick solution using jQuery: http://jsfiddle.net/M4b9D/9/

function addMore() {
    var newdiv = $(".more_group:last").clone();
    var newid = Number(newdiv.attr('id').replace(/post_relics_attributes_(\d+)/, "$1")) + 1;

    newdiv.attr('id', "post_relics_attributes_" + newid)

    $.each(newdiv.find(":input"), function() {
      var thisname = $(this).attr('id');
       thisname = thisname.replace(/\d+/, newid);

       $(this).attr('name', thisname);
       $(this).attr('id', thisname);
       $(this).val('');
     });

    $("#groups").append(newdiv);

}

Basically, it just creates a copy of the last div inside a group of divs, and updates the ids/names/values of each input inside that div. I played a bit with the way your elements are named to make writing this a bit easier, as well as added a group div so there'd be something to append the new div to.

answered Jun 23, 2014 at 12:03

nmarsh

1647 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mmsilviu Over a year ago

This works excellent when you already have a group to copy from. If it's the first group, from where can you copy?

Max Filippov · Accepted Answer · 2014-06-24 11:10:02Z

0

The correct answer was given by some user, but someone deleted that answer - too bad. The answer was to use Cocoon gem, where everything is already implemented.

answered Jun 24, 2014 at 11:10

Max Filippov

2,12219 silver badges37 bronze badges

Comments

mmsilviu · Accepted Answer · 2019-02-06 14:15:17Z

0

You can use nested_form gem. An example, in this article.

answered Feb 6, 2019 at 14:15

mmsilviu

1,5011 gold badge18 silver badges27 bronze badges

Collectives™ on Stack Overflow

How can I dynamically add new nested field to form via JS in Rails?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related