Rails：在表單中動態顯示值

仍然試圖解決這個難題。我在這裏有一個更完整的例子。該模型被稱爲PanOrder。Rails：在表單中動態顯示值

下面是我在/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個或更多平底鍋，然後點擊複選框，「小計」後面不會顯示任何內容。

來源

2012-10-22 user1765002

您的ID爲number_of_pans的DOM元素是一個選擇標記，但在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（）」屬性，而不是你有這樣的：

假：平變化=> 「pans_total_cost（）」}」 NAME = 「expedited_shipping」 >通過設置值，不管是檢查

修復：。

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

來源

2012-10-22 22:50:06 Nick

我用你的建議，我編輯你的答案後的結果我想你可以看到和批准，如果你能不看到它，我會發布到我原來的問題 – user1765002

我檢查了結果，並在這裏創建了一個測試：http://jsfiddle.net/japanick/CpFYy/我注意到你有一個check_bo x_tag，也是Javascript中的另一個錯字。在我的答案中查看更新後的代碼和其他文本。 – Nick

另請注意：$（「＃price_per_pan」）不起作用，因爲Rails通過form_for呈現窗體元素名稱空間，因此您想要的字段實際上是$（「＃pan_order_price_per_pan」）。答案已更新。 – Nick

Rails：在表單中動態顯示值

回答

相關問題