CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby
Muhammad Yaseen
Muhammad Yaseen

Reputation: 371

Dynamically calculate balance in the form_for field - Ruby on rails

I just want to calculate balance dynamically within the rails form_for in new.html.erb.

Please find the pictorial representation as below;

Image.png

In the form I want to retrieve balance with previous balance value with new amount and discount values.

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

In console I get the output as desired but unable to achieve in rails form.I searched but I did not find and I am not very good at jquery.

Any suggestions are most welcome.

Thank you in advance.

Upvotes: 2

Views: 918

Answers (2)

lacostenycoder
lacostenycoder

Reputation: 11226

You're almost there, just clean this up a little and assign the balance: Updated answer, I think you want something like this, but you can modify based on this:

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

Upvotes: 1

Anirudha Gupta
Anirudha Gupta

Reputation: 9289

You are reading value from DOM element which is fine but you need to set it back to DOM (the result, balance)

Calc_balance.val(balance + Previous balance)

This will set the value to the balance text-box.

Upvotes: 0

Related Questions