javascript - rails : Making each choice in a form select field render relevant input in another form field

Question

这里是菜鸟，所以我提前为听起来像业余爱好者而道歉。我正在尝试编写一个电子商务网站的代码。客户将从上传到网站的图像中订购海报，并根据原始图像的尺寸选择他们想要的海报尺寸(高 x 宽)。我有一个用于创建新订单的表单，其中一个字段是带有海报尺寸选项的选择字段。当他们选择尺码时，我希望价格能够在表单的单独字段中自动更新，以便他们在提交表单之前知道价格是多少。

我一直在尝试的策略是在选择字段选项中添加 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>

在 asset>javascripts>application.js 中，我的 jQuery 代码是:

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

它不起作用，我不知道我想做的事情是否不起作用，或者我只是做错了。

预先感谢您的帮助。

Answer 1

这是我最终想出的解决方案...我稍微改变了我的目标，而不是试图做到这一点，以便当用户选择尺寸时，它会自动更新价格字段，我只是做了一个单独的段落(不是表单字段)。它看起来像这样:

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

这很有效，只是当带有表单的页面以默认大小加载时它不会自动显示价格...任何关于这方面的建议都会很棒...

~~~~~~~~~

好吧，我终于弄清楚了最后一部分。我在这里提到了另一个线程，它引导我找到了这个解决方案，很抱歉重新提交，但这里是:为了让 JavaScript 识别 ruby​​ 符号 :size 我在同一个文件中添加了这个 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 %>