Change a variable in form based on selection within form

UPDATE 6/21/12

I have a form in rails that is working similar to an e-commerce checkout.

The user selects a start hour, end hour, date, time and price preference(hourly, weekly, daily, etc.) in the form. The product already has a set price in the database that I'm converting to (hourly, weekly, daily, etc.) that I'd like to change based on the price preference and then get submitted with the rest of the form.

I've been following Ryan's screencast on dynamic select menus but I'm wasn't sure how I'd fit his demo into my application since I don't want the user to select the price just the measure (daily/hourly/etc.)

Gear has_many line_items line_items belongs to Gear and Carts

Below is my code:

Gear Model (where I've created the price variables)

class Gear < ActiveRecord::Base
  attr_accessible :title, :size, :price, :sub_category_id, :user_id, :image, :image_a, :remote_image_url, :color, :year, :latefee, :cancellation, :minrental, :policy, :about, :address, :city, :state, :zip
  belongs_to :user
  belongs_to :sub_category
  has_one :category, :through => :sub_category
  has_many :comments, :dependent => :destroy 
  has_many :line_items
  has_many :calendars
  require 'carrierwave/orm/activerecord'
  mount_uploader :image, GearpicUploader
  mount_uploader :image_a, GearpicUploader
  before_destroy :ensure_not_referenced_by_any_line_item

  validates :title, presence: true
  validates :size,  presence: true
  validates :price, presence: true
  validates :sub_category_id, presence: true
  validates :user_id, presence: true

  def hourly_price
    price/24
  end

  def weekly_price
    price*7
  end

  def monthly_price
    weekly_price*4
  end
end

View

<div class="gearside_date_top">
    <%= form_for LineItem.new do |f| %>
    <p><%= render :partial => "price" %> / 
        <%= f.select :day_or_hour, [['day', 1], ['hour', 2]], :id => 'day_or_hour' %>
    </p>
</div>      

Partial Given to View

<em>from</em>
<span id="gear_daily" style="font-size: 190%; color: #94cbfc;">$<%= @gear.price %></span>
<span id="gear_hourly" style="font-size: 190%; color: #94cbfc; display:none;">$<%= @gear.hourly_price %></span>

Javascript

$('#day_or_hour').change(function() {

     var $index = $('#day_or_hour').index(this);

     if($('#day_or_hour').val() = '2') { 
     $('#gear_hourly').show(); 
     } 
     else {
     $('#gear_daily').show();//else it is shown

     }
});

I can't seem to get it working.

Answers


You can put your price in a partial:

<div class="gearside_date_top">
  <%= form_for LineItem.new do |f| %>
  <%= render :partial => "price" %>
  <%= f.select :day_or_hour, [['day', 1], ['hour', 2]], :id => 'day_or_hour' %>

_price.html.erb

<em>from</em><span style="font-size: 190%; color: #94cbfc;">$<%= @gear.price %></span>

In your line_item.js you put the code to update the price: line_item.js

$('#day_or_hour').change(function() {
  $.get("/cart/update_price", {option: $(this).val()}, function(data) {
  }
}

On cart_controller.rb you create the method update_price that makes a call to line_item.rb total_price.

Hope you understand.

edit

It would look like something like this.

def update_price
  @gear.price = LineItem.total_price(@gear)
  render :partial => 'price'
end

Need Your Help

How do I hide a cell in a RadGridView depending on the current object's bool property?

c# wpf xaml data-binding radgridview

I currently have a list of objects in which my RadGridView's ItemsSource is set to. When the property "DoNotContact" of the object in the list has been set to True, I want to hide the information i...

Kotlin - Error: Could not find or load main class _DefaultPackage

kotlin

I followed the Kotlin tutorial for eclipse here : Getting Started With Eclipse Luna