如何使用表单动态更新实例变量？

Question

我正在开发我的第一个 RoR 7.1.3.2 项目，并且我已经设置了一个简单的表单来接受客户订单。我有一个名为 @total 的实例变量，我希望能够将此总数更新为等于所有 number_fields 的总和，以便获得订购的商品总数。我希望每次更新表单中的 number_field 时都会更新此值，这样客户在填写表单时就可以准确计算他们购买的商品数量。

我不太了解 javascript，但我在搞乱它，但老实说，我不确定如何从 javascript 访问实例变量，我知道我可以更新 div 的文本上下文，但我真的很希望能够能够拥有一个实例变量，而不仅仅是输出一些文本，这样我就可以使用该变量更轻松地与我的数据库进行交互。

我想到的另一件事是在 OrdersController 中调用一些操作来更新变量，但我不确定这将如何工作，或者这是否是最好的方法。

我一直在查看文档，确实如此，但我想我可能不知道该去哪里查看，因为我找不到任何相关信息。将不胜感激任何帮助。这是我的代码：

<div class ="mt-2">
  <%= form_with model: @order do |form| %>
    <%= form.hidden_field "user", value: current_user.id %>
    <% @total = 0.00 %>   
    <% @items.each do |item| %>
      <%= form.fields_for OrderToItem.new, index: item.id do |item_form| %>
        <div><%= item_form.label :amount, item.name %></div>
        <div><%= item_form.number_field :amount, min: 0 %></div>
        <div><%= item_form.hidden_field :id, value: item.id %></div>
        <br>
      <% end %>
    <% end %> 

    <div><%= number_to_currency(@total, unit: "$", precision: 2) %></div>
    <%= form.submit "Submit Order", class: "bg-amber-950 rounded-xl p-2 mt-2 font-bold text-white" %>
  <% end %>
</div>

Answer 1

为金额字段添加事件

<div><%= item_form.number_field :amount, min: 0, onchange: "updateTotal()" %></div>

向元素添加 id 显示总金额：

<div id="total"><%= number_to_currency(@total, unit: "$", precision: 2) %></div>

添加 js 代码以在项目 cmount 发生更改时更新总金额：

<script>
  function updateTotal() {
    var total = 0;
    document.querySelectorAll('[name$="[amount]"]').forEach(function(input) {
      total += parseFloat(input.value) || 0;
    });
    document.getElementById('total').innerText = "$" + total.toFixed(2);
  }
</script>

这是伪代码，您可能需要对其进行一些编辑并重构