前提条件

Ruby 3.1.0
Rails 7.0.4

やりたいこと

プルダウンを選択したらフォームが自動入力されるような仕様にしたい。

今回は、食材名を選択すると単価が自動入力される実装を紹介する。

方法

1. プルダウンと自動入力される部分を記述

▼プルダウン部分
:onchange => "changeTemplate($(this).val())でJavaScriptが呼び出される。
▼自動入力部分
最終的にid: "price"の箇所が自動入力される仕組みとなっている。

views/foods/new.html.erb

<%= form_with model: [@user, @food] do |f| %>
<table class="formTable">
  <form>
  <tr>
    <th>食材名</th>
    <td>
      <%= f.collection_select(:food_stock_id, FoodStock.all, :id, :name,
        {prompt: "選択してください"}, {class: 'ChoseTemplate', :onchange => "changeTemplate($(this).val())"}) %>
    </td>
    <th>単価</th>
    <td>
      <%= f.label :食材名を選択すると自動入力されます, id: "price" %>
    </td>
  </tr>
  </form>
</table>
<% end %>

2. JavaScriptを記述

下記プログラムをnew.html.erbに追記する。
onchangeによって下記が呼び出される流れ。

views/foods/new.html.erb

<script>
  function changeTemplate(val){
    var template_id = val;

    $.ajax({
      url: "/templates/get_body",
      type: "GET",
      data: {
        template_id: template_id
      }
    })
  }
</script>

3. ルーティングを設定

すると/templates/get_bodyにアクセスされるようになる。
ルーティングが設定されていないので設定する。

get '/templates/get_body', to: "templates#get_body"

4. コントローラーを設定

ルーティングに従ってtemplates_controller.rbが呼び出される。
コントローラー内ではパラメーター値からFoodStockテーブルのpriceカラムを取得している。

controllers/concerns/templates_controller.rb

class TemplatesController < ActionController::Base
  # 選択された在庫食材の金額を取得する
  def get_body
    @food_stock = FoodStock.find(params[:template_id])
    @price = @food_stock.price
    respond_to do |format|
      format.js
    end
  end
end

5. ビューを設定

1.で説明した「id: "price"の箇所が自動入力される仕組み」を実装する。

views/templates/get_body.html.erb

$("#price").html("<%= j(@price) %> 円")

【Ruby on Rails】Ajaxを利用してフォームの自動入力機能を実装する方法