【Rails6】ブラウザで取得したvalueをサーバーサイドに送りたい

Question

現在、一度の投稿で複数レコードを登録する機能を実装しています。

具体的に以下機能を実現したいと考えています。
❶ 食材をカテゴリ毎(魚/肉/飲料など)に入力欄を設ける。カテゴリは、タブで変更する。
❷ 例) 魚カテゴリを選択し、入力されたレコードには、魚カテゴリのidを付与したい。
❸ カテゴリのidは、jQueryを用いて、タブがクリックされると、自動的に取得できるよう実装している。
❹ カテゴリのidは、"hidden_field"で隠し、idだけサーバーサイドに送ろうとしている。

困りごと

上記❸❹の「カテゴリidをタブ切り替えごとに取得」して、フォームの送信と共に「サーバーサイドまで送る」ことは成功していますが、idが初めのレコードにしか反映されません。

繰り返しとなりますが、やりたいことは、食材のカテゴリに応じてidを付与したい(魚のタブから入力したのであれば、魚のカテゴリidが保存したい)のです。なぜ、初めのレコードにしか付与されないのでしょうか。お知恵をお貸しいただきたくお願いいたします。

Version

Ruby on Rails 6
jQuery 3.6.0

該当のソースコード

HTML

  <div class="content-area">
    <%= form_with model: @form, url: box_foods_path, method: :post, local: true do |form| %>
      <%= render 'shared/foods_error_messages', model: @form %>
      <div class="content show">
        <%= render partial: 'shared/fields_for', locals:{ form: form } %>
      </div>

      <div class="content">
        <%= render partial: 'shared/fields_for', locals:{ form: form } %>
      </div>

      <div class="content">
          <%= render partial: 'shared/fields_for', locals:{ form: form } %>
      </div>

      <div class="content">
        <%= render partial: 'shared/fields_for', locals:{ form: form } %>
      </div>

      <div class="content">
        <%= render partial: 'shared/fields_for', locals:{ form: form } %>
      </div>

      <div class="sell-btn-contents">
        <%= form.submit "登録する" ,class:"sell-btn", id:"food-btn" %>
        <%=link_to 'もどる', root_path, class:"back-btn" %>
      </div>
    <% end %>
  </div>

render(フォーム表示部分)

<h2>選択されている食材カテゴリ : <i class="fa-solid fa-fish"></i>Fish </h2>
<table class="item-table">
  <thead>
    <tr class="item-tr">
      <th>登録</th>
      <th>食材名</th>
      <th>個数</th>
      <th>購入日</th>
      <th>消費期限</th>
      <th>購入価格</th>
    </tr>
  </thead>
  <%# TODO : フォーム追加できるようにする。https://web-tsuku.life/add-form-appendchild/ %>
  <tbody>
    <%= form.fields_for :foods do |f| %>
      <tr class="item-tr">
        <td><%= f.check_box :availability, {}, "true", "false" %></td>
        <td><%= f.text_field :food_title %></td>
        <td><%= f.number_field :number_title, min: 1, max: 99 %></td>
        <td><%= f.date_field :purchase_date %></td>
        <td><%= f.date_field :expiry_date %></td>
        <td><%= f.text_field :price %></td>
        <td><%= f.hidden_field :category_id, id:"send-data" %></td>
      </tr>
    <% end %>
  </tbody>
</table>

jQuery

• 押下されたタブに応じて、hidden_fieldのvalueを書き換えています。

$(function() {
  let tabs = $(".tab"); // tabのクラスを全て取得し、変数tabsに配列で定義
  let tab_id = 1
  $(".tab").on("click", function() { // tabをクリックしたらイベント発火
    $(".active").removeClass("active"); // activeクラスを消す
    $(this).addClass("active"); // クリックした箇所にactiveクラスを追加
    const index = tabs.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義
    $(".content").removeClass("show").eq(index).addClass("show"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加
  })

  $("#tab-fish.tab").on("click", function(){
    // どのタブが選択されたか判断
    tab_id = $("#tab-fish.tab").data("value");
    $("#send-data").val(tab_id)
  });

  $("#tab-veg.tab").on("click", function(){
    // タブのIDを取得
    tab_id = $("#tab-veg.tab").data("value");
    $("#send-data").val(tab_id)
    debugger;
  });
})

Foods Controller

• こちらでnew/createアクションを定義しています。
• Formオブジェクトを組んで、複数レコードが登録できるよう実装しています。

class FoodsController < ApplicationController
  def new
    # @form = Form::FoodCollection.new(params[:box_id])
    @form = Form::FoodCollection.new
  end

  def create
    @form = Form::FoodCollection.new(food_collection_params)
    binding.pry
    if @form.save == true
      redirect_to root_path, notice: "商品を登録しました"
    else
      render :new
    end
  end

  def edit
  end

  def update
  end

  def show
  end

  private

  def food_collection_params
    params.require(:form_food_collection)
    .permit(foods_attributes: [:availability, :food_title, :number_title, :purchase_date, :expiry_date, :price, :give_id, :category_id])
    .merge(
    box_id: params[:box_id]
  )
  end
end

Formオブジェクト

class Form::FoodCollection < Form::Base
  FORM_COUNT = 3
    #ここで、作成したい登録フォームの数を指定
  attr_accessor(
    :foods,
    :availability, :food_title, :number_title, :purchase_date, :expiry_date, :price, :give_id, :category_id,
    :box_id
  )
    # foodsに作成したモデルが格納される

  with_options presence: true do
    validates :food_title
    validates :number_title
    validates :purchase_date
    validates :expiry_date
    validates :price
  end

  # 初期化メソッド

  def initialize(attributes = {})
    super attributes
    self.foods = FORM_COUNT.times.map { Food.new() } unless self.foods.present?
  end

  def foods_attributes=(attributes)
    self.foods = attributes.map { |_, v| Food.new(v) }
  end

  def save
    is_success = true
    ava_count = 0
    Food.transaction do
      self.foods.each do |food|
        food.valid?
        if food.availability
          f = Food.new(box_id: box_id)
          food.box_id = f.box_id
          is_success = false unless food.save
          ava_count += 1
        end
      end
      if ava_count == 0
        is_success = false
      end
      raise ActiveRecord::RecordInvalid unless is_success
    end

    rescue
      p 'error'
    ensure
      return is_success
  end
end

自分で調べたことや試したこと

仮説
fields_forを用いると、欄への記載に関わらず「生成された入力欄が全てサーバーサイドに送られる」ため、カテゴリidが希望のレコードに付与されない？
ただし、もしそうであれば、その他の入力項目も正しく保存されないはずだが、jQueryで取得したカテゴリidのみ、おかしな挙動をしている。

長文かつ分かりにくい箇所があるかと思いますが、何卒よろしくお願いします。

Answer 1

原因

id は、ひとつのHTMLファイル内で一意でなければいけません。
しかし、質問者さんのコードだと send-data という id を持つ要素が複数出力されてしまいます。

<%= form.fields_for :foods do |f| %>
    ...
    <%# ↓ fields_for 内で id を指定しているので、同じ id を持つ要素が複数出力されてしまう >
    <td><%= f.hidden_field :category_id, id:"send-data" %></td>
    ...
<% end %>

同じ id の要素が複数存在するような html は想定されていないため、「category_idが初めのレコードにしか反映されない」という現象が発生しています。

解決策

id の代わりに class など重複OKな属性を利用してください。

-    <td><%= f.hidden_field :category_id, id:"send-data" %></td>
+    <td><%= f.hidden_field :category_id, class:"send-data" %></td>

 ---

   $("#tab-fish.tab").on("click", function(){
     // どのタブが選択されたか判断
     tab_id = $("#tab-fish.tab").data("value");
-    $("#send-data").val(tab_id)
+    $(".send-data").val(tab_id)
   });

Comments

[izu_reco]

返答が遅くなり、申し訳ありません。
先ほど、ご指導いただいた内容をもとに修正したところ、カテゴリごとにidを振り分けることができました。

>> idはひとつのファイルで一意でなければならない

という点、よく覚えておくようにします。
本当にありがとうございました。