0

仍在努力解决这个难题。我有一个更完整的例子here。该模型称为 PanOrder。

这是我在 /assets/javascripts/pan_orders.js 中的内容：

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = document.getElementById("price_per_pan");
    individual_price = p.value;
    n = document.getElementById("number_of_pans");
    pans = n.value;
    if (pans > 0)
    {
        document.getElementById.html("pans_total").value = n * p;
    }
}

...这就是我的 /views/pan_orders/_form.html.erb 中的内容

<%= form_for(@pan_order) do |f| %>
  <% if @pan_order.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@pan_order.errors.count, "error") %> prohibited this pan_order from being saved:</h2>

      <ul>
      <% @pan_order.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <%= f.hidden_field :price_per_pan, :value => 300 %>
    <%= f.hidden_field :extra_shipping, :value => 25 %>
  <div class="field">
    <%= select_tag :number_of_pans, options_for_select(pans_array)%>
  </div>
  <h3>Subtotal: <span id="pans_total"></span></h3>
  <div class="field">
    <%= check_box_tag :expedited_shipping, :checked => false, :onclick => "pans_total_cost()"  %>
    </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

...这就是我的 /helpers/pan_orders_helper.rb 中的内容

module PanOrdersHelper
    def pans_array
      numbers = []
      zero = ["0", 0]
      one = ["1", 1]
      two = ["2", 2]
      three = ["3", 3]
      four = ["4", 4]
      five = ["5", 5]
      numbers << zero << one << two << three << four << five
    end
  end

但是，当显示表单时，我从下拉列表中选择了 1 个或多个平底锅，然后单击复选框，“小计”后没有任何内容出现。

4

1 回答 1

1

ID 为的 DOM 元素number_of_pans是一个选择标记，但在 JavaScript 中，您正在使用“.value”来尝试获取选定的值，但这是行不通的。此外，您设置 HTML 的代码<span id="pans_total">也不起作用。您有“.html”的拼写错误，而且您也不能使用“.value”设置 DOM 元素的 HTML。

我强烈建议您使用 jQuery 或其他一些 JavaScript 框架来帮助动态地操作页面。

此外，您在将两个值相乘的实际计算中也存在拼写错误。使用了错误的变量名。

// include jQuery in your <head>

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = $("#pan_order_price_per_pan");    // jQuery selector (updated)
    individual_price = p.val(); // this is the jQuery way to get an input's value
    n = $("#number_of_pans");
    pans = n.val(); // this works with select tags too
    if (pans > 0)
    {
        $("#pans_total").html(individual_price * pans); // jQuery way to set the HTML of an element
    }
}

没有 jQuery 的解决方案：

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = document.getElementById("pan_order_price_per_pan"); // <-- updated ID name
    individual_price = p.value;
    n = document.getElementById("number_of_pans");
    pans = n.options[ n.options.selectedIndex ].value; // <-- updated line
    if (pans > 0)
    {
        document.getElementById("pans_total").innerHTML = individual_price * pans;  // <-- updated line, including variable names!
    }
}

此外，您的check_box_tag表单助手调用存在错误。您缺少两个必填字段，因此您的选项未按预期使用。如果您查看生成的 HTML 输出，您没有 onchange="pans_total_cost()" 属性，而是有这个：

假，:onchange=>"pans_total_cost()"}" name="expedited_shipping">

通过设置值以及是否选中它来修复它：

<%= check_box_tag "expedited_shipping", "yes", false, { :onchange => "pans_total_cost()" } %>
于 2012-10-22T22:50:06.417 回答