Rails：フォームの選択フィールドでそれぞれの選択肢を別のフォームフィールドに入力してください

Question

ここでNoobはアマチュアのように聞こえることをお詫びします。私は電子商取引サイトをコーディングしようとしています。顧客は、サイトにアップロードされた画像からポスターを注文し、元の画像の寸法に応じて希望するポスターのサイズ（h x w）を選択します。新しい注文を作成するためのフォームがあり、フィールドの1つはポスターサイズオプションの選択フィールドです。彼らがサイズを選択すると、フォームの別のフィールドで価格を自動的に更新し、フォームを送信する前に価格を知りたいと思う。

私が試みてきた戦略は、selectフィールドの選択肢にjQuery onclickコードを追加することです。ここでは（単に簡潔にするために選択フィールドで最初の選択肢を示す）フォームのために私が持っているものです。

<%= form_for(@order) do |f| %> 
<div id="order_form"> 

<div class="field"> 
    <%= f.label(:size) %><br> 
    <%= f.select(:size, [link_to("#{@image.dimensions['width']/120} * #{@image.dimensions['height']/120}", '#', :onclick => "showPrice('#{@image.dimensions['width']/120} * #{@image.dimensions['height']/120}'); return true;"), ... ]) %> 
</div> 

<div class="field"> 
    <%= f.label(:price) %><br> 
    <%= f.text_field :price, :id => 'price' %> 
</div> 

</div> 

そして資産> JavaScriptの>私のjQueryのコードをapplication.jsです：

function showPrice(size) { 
$("#price").html("$" + size * 0.08); 
} 

それはです私がやろうとしていることがうまくいかないのか、それとも間違っているのか分かりません。

ご協力いただきありがとうございます。

Answer 1

私はこのようなものを試します。

$('select#size').change(function() { 

    var amount = $('select#size').val(); 
    var newAmt = amount * 0.08 
    $('#price').val('$' + newAmt); 

}) 

コードの一部を分解して、どちらが機能しているかを確認してください。これが見てチェックしようとするだろう次その後、機能している場合、これはその後、動作する場合は、この

$('select#size').change(function() { 
    var amount = $('select#size').val(); 
    console.log(amount) 
    //checking to see if .change function works 
    //and if you are able to collect the value of 
    //whats inside 'select#size' 
}) 

のような単純な何かを始めるたとえば

は、多分あなたは、次の行

var newAmt = amount * 0.08 
console.log(newAmt) 

を行うことを検討することができます#priceフィールドに正常に電話をかけている場合は、ザッツはその後、作業している場合、それらのすべてがあまりにも動作するはず全体のコードを組み合わせて、作業している場合

var price = $('#price').val(); 
console.log(price) 

だから多分あなたは #price最初

$('#price').val('its working!') 

に値を配置してみてください。お役に立てれば！

Answer 2

私は最終的に思いついた解決策です...私は目標を少し変更しました。ユーザーがサイズフィールドを自動的に更新するようにしようとするのではなく、別の段落を作成しました。フォームフィールド）。

<div id="order_form"> 

<p id='price'><%= '$' + :size.to_int * 0.8 %></p>  
<div class="field"> 
    <%= f.label(:size) %><br> 
    <%= f.select :size, ["#{@image.dimensions['width']/120} X # {@image.dimensions['height']/120}", "#{@image.dimensions['width']/140} X #{@image.dimensions['height']/140}", "#{@image.dimensions['width']/160} X #{@image.dimensions['height']/160}", "#{@image.dimensions['width']/180} X #{@image.dimensions['height']/180}", "#{@image.dimensions['width']/200} X #{@image.dimensions['height']/200}", "#{@image.dimensions['width']/220} X #{@image.dimensions['height']/220}"], {}, :oninput => "showPrice(this)" %> 
</div> 
</div> 

、ここで私のjQueryの機能です：ここでは次のようになります。これは、それ以外に動作

function showPrice(size) { 
var Amt = $(size).val(); 
var arr = Amt.split(" "); 
var newerAmt = Math.round(arr[0] * arr[2] * 0.8); 
$("#price").html('Price: $' + newerAmt); 
} 

が自動的に価格を示すいないときのデフォルトのサイズと形の負荷のページ...あらゆるその上のアドバイスは素晴らしいことだ...

~~~~~~~~~

OK私は最終的にその最後の部分を考え出しました。私はここに別のスレッドと呼ばれ、それが再送信のためにとても残念この溶液に私を導いたが、ここにある： JavaScriptがRubyのシンボルを認識するために取得するには：

<%= content_tag :div, class: "size_information", data: {size: @size} do %> 
<% end %> 

：サイズ私は、同じファイル内でこのdiv要素を追加しました

ブラウザには表示されませんが、JSに必要なデータが含まれています。それから私は、そのデータを参照し、その同じページ上のJS関数の は変数としてそれを使用することができました：

<%= javascript_tag do %> 
$(document).ready(function() { 
var size = $('.size_information').data('size'); 
var arr = size.split(" "); 
var newerAmt = Math.round(arr[0] * arr[2] * 0.8); 
$("#price").html('Price: $' + newerAmt); 
}) 
<% end %>