Javascript - applying a price change when adding quantity in a text field

Question

I'm using a javascript code block to calculate a price change. My app is an events app (using Ruby for back-end) and I need to offer a user the facility to book as many spaces as they wish - within the confines of the number of spaces available.

It needs to be as simple as quantity * price

My efforts so far simply aren't working. This is my code so far -

booking.new.html.erb -

<%= simple_form_for [@event, @booking], id: "new_booking" do |form| %>

  <div class="calculate-total">
    <p>
      Confirm number of spaces you wish to book here:
      <input type="number" placeholder="1"  min="1" value="1">
    </p>
    <p>
      Total Amount
      £<span class="total" data-unit-cost="<%= @event.price %>">0</span>
    </p>
  </div>


  <span class="payment-errors"></span>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YYYY)</span>
      <input type="text" size="2" data-stripe="exp-month"/>
    </label>
    <span> / </span>
    <input type="text" size="4" data-stripe="exp-year"/>
  </div>
  </div>
<div class="panel-footer">    

  <%= form.button :submit %>


    </div> 

  <% end %>
    <% end %>

      </div>
    </div>
</div>  

<script type="text/javascript">
  $('.calculate-total input').on('keyup', calculateBookingPrice);

  function calculateBookingPrice() {
    var unitCost = parseFloat($('.calculate-total .total').data('unit-cost')),
        numSpaces = parseInt($('.calculate-total .num-spaces').val()),
        total = (numSpaces * unitCost).toFixed(2);

    if (isNaN(total)) {
      total = 0;
    }

    $('.calculate-total span.total').text(total);
  }

  $(document).ready(calculateBookingPrice)

</script>

I'm a complete novice at javascript so I fear I'm making some fairly straightforward error(s) which are causing this not to work. Am I not indenting correctly? Am I not 'targeting' the correct id? Do I need to seperate my javascript into a separate .js file? Is there further code required in the controller/model?

Here's my model code -

booking.rb -

class Booking < ActiveRecord::Base

    belongs_to :event
    belongs_to :user

    def total_amount

        #quantity.to_i * @price_currency.to_money
        quantity.to_i * strip_currency(event.price)
    end

    private

        def strip_currency(amount = '')
            amount.to_s.gsub(/[^\D\.]/, '').to_f
        end



end

So far, this is how my view looks (styling is out of kilter due to added fields - not corrected as yet) - the total amount simply shows 0(zero) so isn't even reflecting the initial event.price of one space as shown on the event.show view page.

How do I rectify all of this? Is there a jQuery option/library which is more straightforward?

Answer 1

You use numSpaces = parseInt($('.calculate-total .num-spaces').val()) to get the value for numSpaces variable.

But in this code there is no element with that class. I guess you meant to retrieve this one

Confirm number of spaces you wish to book here: <input type="number" placeholder="1" min="1" value="1">

Just add the appropriate class <input type="number" placeholder="1" min="1" value="1" class="num-spaces"> and you'll be fine.

I hope I helped.