複製したフォームのデータを保存したい

Question

前提・実現したいこと

旅行の思い出を投稿するwebアプリを制作しています。
Spotというモデルで一地点ごとに情報をもたせ(address,image,content,title,post_id)、同一のpost_idを持つデータをPostモデルで1つにまとめて投稿するという機能を実装したいのですが、その投稿フォームの処理をつくるところで躓いています。

1つの投稿が持つ情報は、(address,image,content,title)ｘSpotの数＋Postのcontent　というふうになります。

投稿フォームは1ページで完結させたいので、Spotのフォームを、最初にレンダリングされる段階では1つのみで、「フォームを追加」ボタンがクリックされるたびに1つずつ増えるようにしたいのですが、それを試したところ、フォームを増やすことはできたのですが、
追加したフォームから受け取ったデータを保存する処理のイメージができず、ここで手が止まってしまっています。

解決法がわかる方がいましたら、よろしくお願いします。

↓投稿詳細ページにはなりますが、こんなイメージです。
Spotの1つのレコードごとに部分テンプレートを作るような感じです。(左のオレンジの部分)
今作っている投稿フォームでは、このSpotの一つ一つのレコードとPostのcontent(右上のグレーの部分)を保存できるようにしたいです。

該当のソースコード

↓posts/new.html.erb

<div class="container">
  <h1 class="form-heading">投稿する</h1>
  <%= form_with model: @post do |f|%>
    <div class="field">
      <%= f.text_area :content, placeholder: "post.content"%><br>
      <div id="forms">
        <div>
          <%= f.fields_for :spots do |s| %>
            <%= s.text_field :title, placeholder: "title"%><br>
            <%= s.text_field :address, placeholder: "address"%><br>
            <%= s.text_area :content, placeholder: "spot.content"%>
            <span class="image">
              <%= s.file_field :image, accept: 'image/jpeg,image/gif,image/png' %>
            </span>
          <% end %>
        </div>
      </div>
    </div>
    <div class="btn btn-primary" id="add-form">フォームを追加</div>
    <%= f.submit "投稿", class: "btn btn-primary" %>
    
  <% end %>
</div>

<!-- フォームの追加 -->
<script>
  document.getElementById("add-form").addEventListener("click", function(){
  let forms = document.getElementById("forms");
  let clone = forms.firstElementChild.cloneNode(true);

  forms.appendChild(clone); 
  });
</script>

↓posts_controller.rb

  def new
    @post = Post.new
    @post.spots.build
  end

  def create
    @post = current_user.posts.build(post_params)
    @post.save
    redirect_to root_path
  end

def post_params
    params.require(:post).permit(:content, spots_attributes: [:address, :image, :content, :title])
  end

試したこと

Spotのフォームを追加して投稿すると、最後のフォームの値のみ保存されるようです。

Answer 1

説明が少しあやふやな気がするのですが、Spot has many Postsということだと思います。

参考：【初心者向け】丁寧すぎるRails『アソシエーション』チュートリアル【幾ら何でも】【完璧にわかる】????

上記でアソシエーションについてきちんと整理しておいたほうが良さそうな気がしました。。。

---

Railsではたくさんのフォームを作って、データを送信する場合、フォームオブジェクトを使って実装する形になるかと思います。
下記のような形を実装したいのだと思いますが、Rails2かRails3で作られていて解読が非常に難しいです。。。。

参考：https://rails.densan-labs.net/form/relation_register_form.html
※このRails6バージョンがほしい。

---

個人的におすすめなのは、SpotページにPostフォームを1つ設置して、登録完了した投稿がどんどん下に追加される形です。
例えば浅草（spot_id=3）ページで記事(Post)を書けば、Postモデルのspot_idカラムに3が入るようすると、期待したものが実現できるかと思います。
これの良いところは実装がすごいシンプルで、かつストレスなく利用できるところです。
下記だと追加しかできませんが、編集ボタンをそれぞれの投稿の下につけておけば運用的にも問題ないかと思います。

参考：Railsガイド：JavaScript シンプルな例

Comments

[退会済みユーザー]

すみません説明不足でした…。
この場合、Post has many Spotsなはずです
モックアップを追加したので、もしお暇があれば確認お願いします

[no1knows]

失礼しました。
日本旅行の思い出（post）に、訪問先（spot）、例えば札幌・渋谷・富士山があるということですね。

アプローチ方法を1つ忘れていました。
DHHさん（Rails作者）が無くしたいとつぶやいていたaccepts_nested_attributes_forで実現可能かもしれません。⇒こちらなら比較的実装がスムーズかも

[退会済みユーザー]

すみません。時間が取れず返信が遅れました。
accepts_nested_attributes_forは使っていて、
現状、「spotが1つであれば問題なく保存できるが、spot部分のフォームを複製した時、一番下のフォームに入力された値しか、保存されない」という状態になっていて、複製したフォームの値すべてを保存できるようにしたいというのがこの質問の趣旨です。

[no1knows]

> accepts_nested_attributes_forは使っていて、
であればそのソースか使っている旨を書かないと、回答する人が無駄な手間が増えるばかりです。
（まぁ、今は僕なんですが・・・）

そもそもaccepts_nested_attributes_forは好きじゃないので、あまり知見がないのですが、切り分けするなら

JavaScriptを外して、フォームを複数にして、きちんと保存できるか確認する。
⇒これできちんと保存できるならaccepts_nested_attributes_forの設定は正しいことがわかるので、あとはJavaScriptを確認。
⇒きちんと保存されないならそもそもaccepts_nested_attributes_forの設定がおかしいのでそこを修正。

参考までにaccepts_nested_attributes_for使うならcocoonを使うのが定番かと思います。

[退会済みユーザー]

質問の仕方に拙い部分があり、失礼しました…。

原因をどう探ればいいのかもわかっていない状態でしたので、一度試してみようと思います。

質問に対するご指摘、解決法ともに参考にさせて頂きます。
ありがとうございました。