Onchange event inside nested_form in rails 5

Question

I am using nested_form in my rails application. I need to add onclick event which adds first two fields and render the sum in third field. This script should run in all the nested fields. I tried the following code from gem documentation. Date picker works fine. But not sure how to modify this for onchange event calculations.

$(document).on('nested:fieldAdded', function(event){
   var field = event.field; 
   var dateField = field.find('.date');
   dateField.datepicker();
 })

My form,

<%= nested_form_for(unplanned_receipt, validate: true, html: {multipart:true}) do |f| %>
  <div class="row">
    <div class="col-md-6 form-group">
      <%= f.label :date, class: "col-md-4" %>
      <%= f.text_field :date, class: "col-md-8 form-control datepicker" %>
    </div>
    <div class="col-md-6 form-group">
      <%= f.label :upr_no, 'UPR No', class: "col-md-4" %>
      <%= f.text_field :upr_no, class: "col-md-8 form-control" %>
    </div>
    <div class="col-md-6 form-group">
      <%= f.label :uom, 'UOM', class: "col-md-4" %>
      <%= f.select :uom, UnplannedReceipt.uoms.keys.map { |e| [e.humanize, e]  }, {:required=>true}, class: "col-md-8 form-control e2" %>
    </div>
    <div class="col-md-6 form-group">
      <%= f.label :receipt_type, class: "col-md-4" %>
      <%= f.select :receipt_type, UnplannedReceipt.receipt_types.keys.map { |e| [e.humanize, e] }, {:required => true}, class: "col-md-8 form-control e2" %>
    </div>
  </div>

  <br>

  <div class="col-md-12">
    <table class="table table-bordered" id="tasks">
      <thead>
        <tr>
          <th>Material Name</th>
          <th>Receipt Qty</th>      
          <th>Inventory Qty</th>
          <th>Final Qty</th>
          <th>Delete</th>
        </tr>
      </thead>

      <tbody>
        <%= f.fields_for :unplanned_bulk_materials, validate: true,:wrapper => false do |e| %>
          <tr class="fields">
            <td><%= e.text_field :material_name, :required => true, class: "form-control" %></td>
            <td><%= e.text_field :receipt_qty, :required => true, class: "form-control r_qty" %></td>
            <td><%= e.text_field :inventory_qty, :required => true, class: "form-control i_qty" %></td>
            <td><%= e.text_field :final_qty, :required => true, class: "form-control f_qty" %></td>
            <td><%= e.link_to_remove do%><i class="fa fa-times" style="color:red"></i><%end%></td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <p align="center">
      <%= f.link_to_add :unplanned_bulk_materials, :data => { :target => "#tasks" }, class:"btn btn-sm btn-success" do%><i class="fa fa-plus">Add More</i><%end%>
    </p>
  </div>
  <div class="actions">
    <% if params[:id].nil? %>
      <%= f.submit 'Save', :class=>"btn btn-info" %>
    <% else %>
      <%= f.submit 'Update', :class=>"btn btn-warning" %>
    <% end %>
  </div>

<% end %>
<script type="text/javascript">
  $(".i_qty").on("blur", function() {
    var amt=parseFloat($(".r_qty").val())+parseFloat($(".i_qty").val());
    $('.f_qty').val(Math.round(amt));
  });
</script>

I want the above script to run in all the nested fields. Someone please suggest. Thanks in Advance.

Answer 1

You try some like this?:

$(document).on('nested:fieldAdded', function(event){
    var field = event.field;
    var RField = field.find('.r_qty');
    var IField = field.find('.i_qty');
    var FField = field.find('.f_qty');

    $(".i_qty , .r_qty").change( function() {
        var amt = parseFloat( RField.val() ) + parseFloat( IField.val() );
        FField.val(Math.round(amt));
    });
})