Question

仍在努力解决这个难题。我在这里有一个更完整的例子。该模型称为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个或更多个平移，然后单击复选框，“小计”后不会显示任何内容。

Answer 1

ID为number_of_pans的DOM元素是一个select标记，但在JavaScript中，您使用“.value”来尝试获取所选的值，这将无效。您设置<span id="pans_total">的HTML的代码也不起作用。你有一个错误的“.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（）”属性，而是你有这个：

false，：onchange =＆gt;“pans_total_cost（）”}“name =”expedited_shipping“＆gt;

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

<%= check_box_tag "expedited_shipping", "yes", false, { :onchange => "pans_total_cost()" } %>

Rails：在表单内动态显示值

1 个答案: