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

i having requirement have add 2 text fields , insert value in third stored string. in below form want multiply quantity , price_per_unit , store value in total_amount field should read only. please me.

this form:

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

there can multiple ways this.

suppossing, there 1 column, total_amount in database, can in model have attr_accessor, , before_save, can set total_amount.

if want real-time thing, need js, , pretty easy. 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 in js,

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

but would bad, because can use web-inspector remove readonly , set value myself. if have price , quantity database fields, need not worry else keep validation on server side.