0

やりたいこと

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

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

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

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

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

関連するソースコード

reservations/new.html.erb

<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 %> 

reservations_controller.rb

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

models/menu.rb

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

試したこと

以下部分を

<%= f.hidden_field :person_price, value: "''" %>

↓へ変更

<%= f.hidden_field :person_price, :value => @menu_id.price %>

エラーメッセージ

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

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

def new
    @reservation = Reservation.new
    @menu = Menu.all
  end

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

Rails 6.0.4.1

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

エラーメッセージ

1 件の回答 1

0

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

  <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 %>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。