Javascript 以字段-RubyonRails的形式动态计算平衡

我只想在new.html.erb中动态计算rails表单_中的平衡

请查看以下图示

在表单中，我希望检索具有新金额和折扣值的以前余额值的余额

_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>

$（'input[type=“text”]”）。在（'blur'，function（）{
var计算金额=$（“#计算金额”）；
计算金额；
var金额=计算金额.val（）；
数量
var计算折扣=$（“#计算折扣”）；
计算折扣
var折扣=计算折扣.val（）；
折扣
var计算余额=$（“#计算余额”）；
计算余额；
var余额=金额-折扣；
平衡；
});

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

欢迎提出任何建议

---

提前谢谢。

您正在从DOM元素中读取值，这很好，但需要将其设置回DOM（结果，平衡）

---

这将设置余额文本框的值。

您就快到了，只需稍微清理一下，然后分配余额： 更新的答案，我想你想要这样的东西，但你可以基于此进行修改：

<%= 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>

$（'input[type=“text”]”）。在（'blur'，function（）上{
var计算金额=$（'金额'）；
var金额=计算金额.val（）；
var计算折扣=$（'折扣'）；
var折扣=计算折扣.val（）；
var计算余额=$（'余额'）；
var余额=金额-折扣；
var showMath=$（'show#u math'）；
var mathString=“=以前的余额+”+金额+“-”+折扣+“=”+余额
val（mathString）
计算余额val（余额）；
});

谢谢您的回复。如何将以前的余额添加到新余额中。@穆罕默德·亚辛现在检查谢谢您的回复。@穆罕默德·亚辛没问题。我做了编辑，可以稍微短一点。您完全正确，但我还需要获得以前的余额。例如，请参阅更新的代码，不确定是否要这样显示，但您应该能够基于此进行修改。谢谢。我在show_数学字段中得到“=previous balance+1000-50=950”，但没有得到previous balance值。

<%= 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>