Rails: Сделать каждый выбор в поле выбора формы, сделать соответствующий ввод в другом поле формы

Question

Noob здесь, поэтому я заранее извиняюсь за звучание, как любитель. Я пытаюсь закодировать сайт электронной коммерции. Клиенты заказывают плакаты с изображений, загруженных на сайт, и выбирают размер плаката (h x w), который они хотят, в зависимости от размеров исходного изображения. У меня есть форма для создания нового порядка, и одно из полей - это поле выбора с параметрами размера плаката. Когда они выбирают размер, я хочу, чтобы цена автоматически обновлялась в отдельном поле в форме, чтобы они знали, прежде чем отправлять форму, какая цена будет.

Стратегия, которую я пытаюсь добавить, добавить код 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> 

И в активах> JavaScripts> application.js мой JQuery код:

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); 
} 

Это работает, кроме него не автоматически показывать цену, когда страница с формой нагрузки с размером по умолчанию ... любой консультации по вопросам, что было бы здорово ...

~~~~~~~~~

Хорошо, я, наконец, понял, что последняя часть из.Я говорил в другой теме здесь, и это привело меня к этому решению, так простите за Resubmit, но вот это: Чтобы получить JavaScript, чтобы распознать символ рубиновый: размер Я добавил этот DIV в том же файле:

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

Он не отображается в браузере, но содержит данные, которые нам нужны для 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 %>