I would like to use active hash to display the price according to the selected item.

Hello, I am a beginner at ruby, ruby on rails, and JavaScript.

Subject: I am creating a restaurant reservation site, but I would like to use active hash to implement it so that the selected course meal costs per person.

Tried
We created :name and :price in the model using active hash.
→ Pulldown display is possible, but could not be integrated.

I am also attaching a gyazo image.
https://gyazo.com/5fa62942e8e1a135e738535a51bcb9de

If you have any missing information, I would appreciate it if you could ask me.
Thank you for your cooperation.

models/menu.rb

class Menu <ActiveHash::Base
  self.data = [
  { id:1, name: 'Seasonal Omakase Course', price: '8,800'},
  { id:2,name:'Seafood Nabe Set Course',price:'10,800'},
  { id:3, name: 'Seasonal Omakase Course + All-you-can-drink for 2 hours', price: '12,800'},
  { id:4,name:'Seafood Nabe Set Course + All-you-can-drink for 2 hours',price:'15,000'}
  ]

  include ActiveHash::Associations
  has_many —Reservations
end

views/reservation.html.erb

<h1>%=link_to 'reservation form', root_path, class: 'reservation-form'%>/h1>
<%=form_with model:@reservation, url:new_reservation_path, method::get,class:'reservation',local:true do|f|%>

    <div class="reservation-price">
      <h2> Course Selection</h2>

      <div calss="reservation-date">
        <%=f.label:select date, class:'label'%><br/>
        <%=f.date_field:date,class:'date'%>
      </div>

      <div class="reservation-time">
        <%=f.label: select time, class: 'label'%><br/>
        <%=f.time_field:time,class:'time'%>
      </div>

      <div class="reservation-people">
        <%=f.label: Number of people %><br/>
        <%=f.number_field:people,class:'people'%>people
      </div>

      <%#Applicable %>
      <div class="menu">
        US>Course <br/>
        <%=f.collection_select(:menu_id, Menu.all,:id,:name,{})%>
      </div>
      
      <div class="person-price">
        <span>Payment per person</span><br/>
        <span>
        <span></span> circle 
        </span>
      </div>
      <%#/Applicable %>

      <div class="total-price">
        <span>Total amount</span><br/>
        <span>
        <span></span> circle
        </span>
      </div>

      <div class="reservation-remark">
        <%=f.label: Other %><br/>
        <%=f.text_area: remark, placeholder: "Food I don't like", class: 'remark'%>
      </div>

    <div>
      <%=f.submit "Reserve" %><br/>
    </div>

  <div class="reservation-btn">
    <%=link_to 'back', root_path, class: 'reservation-form'%> 
  </div>
  
<%end%>

ruby-on-rails ruby

2022-09-30 16:16

1 Answers

If I change the pull-down before pressing the reservation button, is it okay to display the amount?

Changing the reservation from pulldown does not cause communication to the server.
Data only on the server side is not available

It's not until I click submit that I want to make a reservation that communication to the server occurs
Server-side data is available via page transition

There are two main ways to accomplish this

Each time you change the pulldown, a page transition occurs.
Generate a page filled with money on the server side

Client side dynamically changes the HTML portion of the amount when pulldown changes

I think the latter method is natural, but to share the price with the client
You must have a table in javascript as soon as you get into the option tag

For example, instead of collection_select,
In f.select, embed price in option tag as follows

<%=f.select:menu_id, (Menu.all.map {|m|[m.name,m.id,{'data-price'=>m.price}]}), {}, {id:'menu_select'}%>

This will generate HTML similar to the following

<select id="menu_select">
<option value="1" data-price="8800"> Seasonal courses</option>
<option value="2" data-price="10800">Seafood Nabe Set Course</option>
<option value="3" data-price="12800"> Seasonal Omakase Course + 2-hour all-you-can-drink</option>
<option value="4" data-price="15000">Seafood Nabe Set Course + 2-Hour All-you-can-drink</option>
</select>

For example, the JS side looks like this

// This action is called every time you change the pulldown.
$('#menu_select').on('change',()=>{
  
  // Get price embedded in the selected option
  const price=$('#menu_select>option:selected').data('price');
  
  // Set the amount string in the span with the total_price ID.
  $('#total_price') .text(price);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="menu_select">
<option value="1" data-price="8800"> Seasonal courses</option>
<option value="2" data-price="10800">Seafood Nabe Set Course</option>
<option value="3" data-price="12800"> Seasonal Omakase Course + 2-hour all-you-can-drink</option>
<option value="4" data-price="15000">Seafood Nabe Set Course + 2-Hour All-you-can-drink</option>
</select>

<div class="total-price">
  <span>Total amount</span><br/>
  <span id="total_price"></span> circle
  </span>
</div>

This is pure javascript

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");
  document.getElementById("total_price").innerHTML = price;
});

<select id="menu_select">
    <option value="1" data-price="8800"> Seasonal courses</option>
    <option value="2" data-price="10800">Seafood Nabe Set Course</option>
    <option value="3" data-price="12800"> Seasonal Omakase Course + 2-hour all-you-can-drink</option>
    <option value="4" data-price="15000">Seafood Nabe Set Course + 2-Hour All-you-can-drink</option>
    </select>

    <div class="total-price">
      <span>Total amount</span><br/>
      <span id="total_price"></span> circle
      </span>
    </div>

2022-09-30 16:16

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656