CODEWITHSUNDEEP
ruby-on-rails
venkat
venkat

Reputation: 836

How to add two text field values in third text field in rails form?

i am having a requirement where we have to add two text fields and insert the value in the third which are stored as string. In the below form I want to multiply quantity and price_per_unit and store the value in total_amount field which should be read only. Please help me.

This is my form:

<%=form_for([:invoice_detail,@multiple_good], html: {class: 'form-horizontal', role: 'form' }) do |f| %>

    <div class="field">
      <%= f.label :description_of_goods, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :description_of_goods, :class => 'text_field', :required => true,:maxlength => 20, :placeholder => '20 Alpha numeric characters'  %>
      </div>
    </div>

    <div class="field">
      <%= f.label :quatity, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :quatity, :class => 'text_field', :required => true,:maxlength => 20, :placeholder => 'Enter quatity'  %>
      </div>
    </div>

    <div class="field">
      <%= f.label :price_per_unit, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :price_per_unit, :class => 'text_field', :placeholder => 'Enter price Per unit'  %>
      </div>
    </div>

    <div class="field">
      <%= f.label :total_amount, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :total_amount, :class => 'text_field', :placeholder => 'Enter Total Amount '  %>
      </div>
    </div>

    <div class="form-actions2"style="text-align:center">
      <%= f.submit  :class => 'btn btn-primary' %>
    </div>
    </div>

<% end %>

Upvotes: 1

Views: 1549

Answers (3)

Dhanshree
Dhanshree

Reputation: 71

<script type='text/javascript'>
$(document).on("keyup", "#item_cgst, #item_sgst", function() {
var val1 = +$("#item_cgst").val();
var val2 = +$("#item_sgst").val();
$("#item_igst").val(val1+val2); 
});
</script>

Try this it worked for me..

Upvotes: 0

Rahul2692
Rahul2692

Reputation: 344

Try this JS to add two text field and show total value in third text field,this JS will update the total-amount in text field automatic without clicking.

$(document).on("keyup", "#quantity, #price", function() {
  var price = $("#price").val();
  var quantity = $("#quantity").val();
  var total = parseInt(price) * parseInt(quantity);
  $("#total-amount").val(total);
});

Thank you.

Upvotes: 0

argentum47
argentum47

Reputation: 2382

There can be multiple ways to do this.

Suppossing, there is only one column, total_amount in database, you can in your model have to attr_accessor, and then before_save, you can set the total_amount.

If you want it like a real-time thing, then you need JS, and that is pretty easy. You can

<%= f.text_field :quatity, class: "text-field", id: "quantity" ... %>
<%= f.text_field :price_per_unit, class: "text-field", id: "price-per-unit" ... %>"
<%= f.text_field :total_amount, class: "text-field", id: "total-amount" .. readonly: true %>

and then in JS,

$(document).on("change", "#quantity #price", function() {
  var price = $("#price").val() || 0,
      quantity = $("#quantity").val() || 0;
  $("#total-amount").val(price * quantity);
});

But I would say that would be bad, because I can easily use the web-inspector to remove the readonly and set the value myself. But if you have the price and quantity as database fields, then you need not worry else keep a validation on the server side.

Upvotes: 4

Related Questions