Javascript - テキストフィールドに数量を追加するときに価格変更を適用する

Question

私はJavaScriptコードブロックを使用して価格変更を計算しています。私のアプリはイベントアプリです（バックエンドにはRubyを使用しています）。利用可能なスペースの数の範囲内で、ユーザーが希望する数のスペースを予約する機能をユーザに提供する必要があります。

それは数量*価格私の努力は、これまで単純に機能していない

のように単純にする必要があります。

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> 

（S）これが動作しない原因となっています。私は正しくインデントしていませんか？正しいIDを「ターゲット設定」していませんか？私は別の.jsファイルにjavascriptを分離する必要がありますか？コントローラー/モデルにさらにコードが必要ですか？

ここに私のモデルのコードです -

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 

はこれまでのところ、これが私の見解のルックス（スタイリングが追加されたフィールドのために元気の外ではどのようにあります） - 合計量は単に0（ゼロ）を示しているので、event.showビューページに示されているように、1つのスペースの最初のevent.priceも反映していません。

は、どのように私はこのすべてを是正するのですか？より簡単なjQueryオプション/ライブラリがありますか？

Answer 1

numSpacesの値を得るには、numSpaces = parseInt($('.calculate-total .num-spaces').val())を使用します。

しかし、このコードでは、そのクラスの要素はありません。 私はあなたがこの1

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

ちょうど適切なクラス<input type="number" placeholder="1" min="1" value="1" class="num-spaces">を追加取得するために意図を推測し、あなたは大丈夫です。

私は助けてくれることを願っています。