javascript - 动态计算 form_for 字段中的余额 - Ruby on rails

Question

我只想在 new.html.erb 中的 rails form_for 中动态计算余额。

请找出如下图示；

在表单中，我想用新的金额和折扣值检索以前余额值的余额。

_form.html.erb

    <div class="form-group">
      <%= f.label :amount %><br>
      <%= f.text_field :amount, class: "form-control",  id: "calculate_amount" %>
    </div>
    <div class="form-group">
      <%= f.label :discount %><br>
      <%= f.text_field :discount, class: "form-control",  id: "calculate_discount" %>
    </div>

    <div class="form-group">
      <%= f.label :balance, "Balance" %><br>
      <%= f.text_field :balance, class: "form-control", id: "calculate_balance" %>
    </div>

new.html.erb

<%= render 'form' %>

<script>
    $('input[type="text"]').on('blur', function() { 

        var Calc_amount = $('#calculate_amount');
        Calc_amount;
        var amount = Calc_amount.val();
        amount;

        var Calc_discount = $('#calculate_discount');
        Calc_discount
        var discount = Calc_discount.val();
        discount

        var Calc_balance = $('#calculate_balance');

        Calc_balance;

        var balance = amount - discount;

        balance;


    });


    </script>

在控制台中，我得到了所需的输出，但无法以 rails 形式实现。我搜索了但没有找到，而且我不太擅长 jquery。

欢迎提出任何建议。

提前谢谢你。

Answer 1

你就快完成了，稍微清理一下并分配余额:更新后的答案，我想你想要这样的东西，但你可以基于此进行修改:

<%= form_tag '/', method: :get do %>
    <div class="form-group">
         <%= label_tag :amount %><br>
         <%= text_field_tag :amount  %>
     </div>
     <div class="form-group">
         <%= label_tag :discount %><br>
         <%= text_field_tag :discount  %>
     </div>
     <div class="form-group">
         <%= label_tag :balance, "Balance" %><br>
         <%= text_field_tag :balance %>
     </div>

        <div class="form-group">
            <%= label_tag :show_math, "Math" %>
            <%= text_field_tag :show_math %>
     </div>
<% end %>

<script>
        $('input[type="text"]').on('blur', function() {
                var Calc_amount = $('#amount');
                var amount = Calc_amount.val();

                var Calc_discount = $('#discount');
                var discount = Calc_discount.val();

                var Calc_balance = $('#balance');

                var balance = amount - discount;

                var showMath = $('#show_math');
                var mathString = "=previous balance  + " + amount + " - " + discount + " = " + balance
                showMath.val(mathString)

                Calc_balance.val(balance);

        });
  </script>