Ruby on Rails - f.select値に基づいてフィールドを更新する

Question

私は購入したいチケットの数を選択するドロップダウンボックスを持っています。私はそれがクリックされた後の値を反映するためにそれの後のフィールドを更新したいと思います。ここに私のフォームのスニペットは現在、次のとおりです。

<%= form_for :transaction, :url => new_transaction_path(:event_id => @event.id), :method => 'GET' do |f| %> 
     <table style="width:100%"> 
     <tr style="border-bottom: 1px solid #999999"> 
      <td><h4>Number of Guests</h4></td> 
      <td> 
      <%= f.select(:quantity, (1..20))%> 
      </td> 
     </tr> 
     <tr style="border-bottom: 1px solid #999999"> 
      <!-- replace (1) with the value from the f.select dropdown --> 
      <td><h4><%= @original_event_price %> x (1) guest(s)</h4></td> 
     </tr> 
     </table> 
     <%= f.submit 'Request to Book', class: 'button mt1 btn-request-to-book' %> 
    <% end %> 

私は最後のテーブルの行のf.selectドロップダウンからユーザーが選択したことを客の値に値を（1）を交換したいです。

WORKING溶液でEDIT

<%= form_for :transaction, :url => new_transaction_path(:event_id => @event.id), :method => 'GET' do |f| %> 
    <table style="width:100%"> 
    <tr style="border-bottom: 1px solid #999999"> 
     <td><h4>Number of Guests</h4></td> 
     <td> 
     <%= f.select :quantity, (1..20), {}, { :onChange=>'mytest()', :id=>'quantitySelect' } %> 
     </td> 
    </tr> 
    <tr style="border-bottom: 1px solid #999999"> 
     <!-- replace (1) with the value from the f.select dropdown --> 
     <td><h4><%= @original_event_price %> x (1) guest(s)</h4></td> 
    </tr> 
    </table> 
    <%= f.submit 'Request to Book', class: 'button mt1 btn-request-to-book' %> 
<% end %> 

SCRIPT

<script type="text/javascript"> 
    function mytest() { 
    var quantity = $('#quantitySelect').val(); 
    $('#quantityRow').html("<h4><%= @original_event_price %> x (" + quantity + ") guest(s)"); 
    } 
</script> 

Answer 1

あなたはjQueryを使ってこれを行うことができます：

はのは、IDを追加してみましょう： "quantitySelect" 数量フィールドに ましょうまた、IDフィールドに「quantityRow」を追加してください。

$(function(){ 
    $('.quantitySelect').change(function(e){ 
    e.preventDefault(); 
    var quantity = $('.quantitySelect').val(); 
    $('.quantityRow').html("<h4><%= @original_event_price %> x (" + quantity + ") guest(s)"); 
    }); 
}); 

また、数量が1より大きいかどうかを確認してゲストにguestという文字を追加することもできます。