Question

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

我一直在尝试的策略是在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>

在资产＆gt; javascripts＆gt; 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 %>

Answer 2

我会尝试这样的事情。

$('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!')

如果所有这些都有效，那么组合整个代码也应该有效。希望这有帮助！

Rails：在表单选择字段中进行每个选择，在另一个表单字段

2 个答案: