

### やりたいこと

飲食店の予約サイトを作成しております。

JavaScriptを使用し、一人当たりのお支払いと合計金額を表示の通りの金額をデータとして保存したい。

### 起きている問題やエラーメッセージ

合計金額・一人当たりのお支払いがデータベースでは 0 となってしまう。

gyazo gif url  
<https://gyazo.com/9c6361851b4e75590e458a8b80bf0b76>

### 関連するソースコード

reservations/new.html.erb

[code]

    <div class="person-price">
              <span>1人当たりのお支払い</span><br />
              <span>
              <%= f.hidden_field :person_price, value: "''" %>　←該当箇所
              <span id="person_price"></span>円 
              </span>
            </div>
    
            <div class="total-price">
              <span>合計金額</span><br />
              <span>
              <%= f.hidden_field :total_price, value: "''" %> ←該当箇所
              <span id="total_price"></span>円
              </span>
              
            </div>
    
            <div class="reservation-remark">
              <%= f.label :その他%><br />
              <%= f.text_area :remark, placeholder:"嫌いな食べ物など",class: 'remark'%>
            </div>
    
          <div>
            <%= f.submit "予約する"%> 
          </div>
    
        <div class="reservation-btn">
          <%= link_to '戻る', root_path, class:'reservation-form'%> 
        </div>
        
    
        
        <script>
      const menu_select = document.getElementById("menu_select");
      menu_select.addEventListener('change', (event) => {
        const selected_index = menu_select.selectedIndex;
        const selected_option = menu_select.options[selected_index];
        const price = selected_option.getAttribute("data-price");
        const personPrice = document.getElementById("person_price").innerHTML = price;
        const people = document.getElementById("reservation_people");
        people.addEventListener("input", () => {
        document.getElementById("total_price").innerHTML = Math.floor(personPrice * parseInt(document.getElementById('reservation_people').value));
        document.getElementById("total_price").value = Math.floor(personPrice * parseInt(document.getElementById('reservation_people').value));
        })
      });
      </script>
    
      <% end %> 
    
[/code]

reservations_controller.rb

[code]

    class ReservationsController < ApplicationController
      before_action :authenticate_user!, except: [:index, :show]
    
      def index
      end
    
      def new
        @reservation = Reservation.new
        @menu = Menu.all
      end
    
      def create
        
        @reservation = Reservation.new(reservation_params)
        if @reservation.valid?
          @reservation.save
          redirect_to root_path
        else
          render 'new'
        end
      end
    
      private
      def reservation_params
        params.require(:reservation).permit(:time, :date, :people, :remark, :menu_id, :total_price, :person_price).merge(user_id: current_user.id)
      end
    end
    
[/code]

models/menu.rb

[code]

    class Menu < ActiveHash::Base
      self.data = [
      { id: 1, name: '---', price: '0'},
      { id: 2, name: '季節のおまかせコース', price: '8800'},
      { id: 3, name: '海鮮鍋セットコース', price: '10800'},
      { id: 4, name: '季節のおまかせコース + 2時間飲み放題', price: '12800'},
      { id: 5, name: '海鮮鍋セットコース + 2時間飲み放題', price: '15000'}
      ]
    
      include ActiveHash::Associations
      has_many :reservations
    end 
    models/reservation.rb
    
    class Reservation < ApplicationRecord
      belongs_to :user
      has_one :menu
    
      with_options presence: true do
        validates :menu_id, numericality: { other_than: 1}
        validates :date
        validates :time
        validates :user_id
        validates :people
        validates :total_price
        validates :person_price
      end
    end
    
[/code]

### 試したこと

以下部分を

[code]

    <%= f.hidden_field :person_price, value: "''" %>
    
[/code]

↓へ変更

[code]

    <%= f.hidden_field :person_price, :value => @menu_id.price %>
    
[/code]

### エラーメッセージ

[code]

    NoMethodError in Reservations#new
    Showing /Users/hosodayusuke/projects/original0505/app/views/reservations/new.html.erb where line #30 raised:
    
    undefined method `price' for nil:NilClass
    
[/code]

priceが定義されていないというエラーですが、controllerにて全てのmenuの値を定義していると思っているのですが、いかがでしょうか。

[code]

    def new
        @reservation = Reservation.new
        @menu = Menu.all
      end
    
[/code]

### 使用言語・ライブラリのバージョン

Rails 6.0.4.1

不足情報がございましたら、コメントいただけると幸いです。  
どうぞ宜しくお願い致します。

エラーメッセージ


CC BY-SA 4.0
2021-08-27T11:30:46.583
81078
2021-08-28T08:41:36.593
2021-08-27T11:51:10.480
3060
47748
question
ruby-on-rails
f.hidden_fieldで送ったvalueの値が0になってしまう


reservations/new.html.erbを以下コードに修正したところ解決致しました。

[code]

      <h1><%= link_to '予約フォーム', root_path, class:'reservation-form'%></h1>
      <%= form_with model: @reservation, class: 'reservation', local: true do |f| %>
      <%= render 'shared/error_messages', model: f.object %>
          <div class="reservation-price">
            <h2>コース選択</h2>
    
            <div calss="reservation-date">
              <%= f.label :日付を選択, class: 'label'%><br />
              <%= f.date_field :date, class: 'date', min: Date.current %>
            </div>
    
            <div class="reservation-time">
              <%= f.label :時間を選択, class: 'label' %><br />
              <%= f.time_select :time, {minute_step: 30}, class: 'time'%>
            </div>
    
            <div class="menu">
              コース<br /> 
              <%= f.select :menu_id, (Menu.all.map {|m| [m.name, m.id, {'data-price' => m.price }]}), {}, {id: 'menu_select'} %>
            </div>
    
            <div class="reservation-people">
              <%= f.label :人数%><br />
              <%= f.number_field :people, class: 'people'%>人
            </div>
            
            <div class="person-price">
              <span>1人当たりのお支払い</span><br />
              <span>
              <%= f.text_field :person_price %>
              <span id="person_price"></span>円 
              </span>
            </div>
    
            <div class="total-price">
              <span>合計金額</span><br />
              <span>
              <%= f.text_field :total_price %>
              <span id="total_price"></span>円
              </span>
              
            </div>
    
            <div class="reservation-remark">
              <%= f.label :その他%><br />
              <%= f.text_area :remark, placeholder:"嫌いな食べ物など",class: 'remark'%>
            </div>
    
          <div>
            <%= f.submit "予約する"%> 
          </div>
    
        <div class="reservation-btn">
          <%= link_to '戻る', root_path, class:'reservation-form'%> 
        </div>
        
    
        
        <script>
      const menu_select = document.getElementById("menu_select");
      menu_select.addEventListener('change', (event) => {
        const selected_index = menu_select.selectedIndex;
        const selected_option = menu_select.options[selected_index];
        const price = selected_option.getAttribute("data-price");
        const personPrice = document.getElementById("person_price").innerHTML = price;
        document.getElementById("reservation_person_price").value = price;
        const people = document.getElementById("reservation_people");
        people.addEventListener("input", () => {
        document.getElementById("total_price").innerHTML = Math.floor(personPrice * parseInt(document.getElementById('reservation_people').value));
        document.getElementById("reservation_total_price").value = Math.floor(personPrice * parseInt(document.getElementById('reservation_people').value));
        })
      });
      </script>
    
      <% end %>
    
[/code]


CC BY-SA 4.0
2021-08-28T08:41:36.593
81090
2021-08-28T08:41:36.593
47748
81078
answer