How to listen to a change event in all/any of the fields of a certain class?

Question

I'm using the cocoon gem to add nested fields for invoice_rows to invoice . For each invoice_row I added a dynamic calculation of the total for that row ( quantity * price ). That all works like a charm, so when I adjust either the price or quantity the row_total changes as well.

Question Now I would like to do the same for the total invoice price. This means that for each invoice_row I need to multiply quantity * price and add them for all rows. This part works on loading the DOM, but I don't know how to trigger a recalculation when any of the fields ( quantity or price ) change.

=>I added the .field class to them to identify them, but as they are not unique, I don't know how to listen for a change of any of them.

Code

invoice_form

<div class="form-container col col-sm-6 col-lg-12">
  <%= simple_form_for [@hotel, @invoice] do |f|%>

    <h5><strong><u><%= t('.invoice') %> </u></strong></h5>
    <!-- headers -->
    <div class="row">
      <div class="col col-sm-3"><b>description</b></div>
      <div class="col col-sm-2"><b>unit price</b></div>
      <div class="col col-sm-2"><b>amount</b></div>
      <div class="col col-sm-2"><b>VAT (%)</b></div>
      <div class="col col-sm-2"><b>Total</b></div>
    </div>
    <div class="border-invoice"></div>
    <!-- headers -->
  <%= f.simple_fields_for :invoice_rows do |invoice_row| %>
  <div class="reservation-details">
    <%= render 'invoice_row_fields', f: invoice_row %>
  </div>
  <% end %>

  <div class="col col-sm-2">Total<input type="text" class="field gross-total form-control"></div>


  <div>
    <%= link_to_add_association f, :invoice_rows do %>
    <div class="option-add-option-price">
      <div class="prices-border">
        <i class="fas fa-plus"></i> Add another invoice line
      </div>
    </div>
    <% end %>
  </div>

  <div class="border-invoice"></div>
  <p><%= Money.from_amount(@invoice.total, @hotel.currency).format %></p>

    <div class="row">
      <div class="col col-sm-6"> <%= f.button :submit, t(".invoice_button"), class: "create-reservation-btn"%>
      </div>
    </div>
    <% end %>
    <% end %>
  </div>
</div>

script invoice_form ( that is used to calculate the total invoice price )

<script>
  // $('.row').keyup(function() {
      // var price = [];
      // var quantity = [];
      var result = 0

      Array.from(document.getElementsByClassName("test")).forEach(
          function(element, index, array) {
            console.log(element)
            var price = [];
            var quantity = [];
              // test
            $('.price').each(function(i, obj) {
              price.push((Math.round(+obj.value*100)/100).toFixed(2));
              console.log(price)
            });

            $('.quantity').each(function(i, obj) {
              quantity.push(+obj.value);
            });
            });

            price.forEach((o,i)=>{
            $(".gross-total").eq( i ).val(o*quantity[i]);
            result += o*quantity[i];
            // console.log(result)
            });

            $(".gross-total").val(result);
// });
</script>

_invoice_row_fields

<div class="nested-fields">
    <div class="row test">
      <div class="col col-sm-3"><%= f.input :description, placeholder: "Product or service description", label: false %></div>
      <div class="col col-sm-2"><%= f.input :price, placeholder: "Price incl. VAT", label: false, input_html:{class: "field price"}  %></div>
      <div class="col col-sm-2 "><%= f.input :amount, label: false, input_html:{class: "field quantity"} %></div>
      <div class="col col-sm-2"><%= f.collection_select :vat_percentage, @hotel.vat_groups, :vat_percentage, :vat_percentage, {prompt: "Select a VAT"}, {class: "form-control"} %></div>
      <div class="col col-sm-2"><input type="text" class="field subtotal form-control"></div>

    <!-- </div> -->

    <div class="col col-sm-1">
      <%= link_to_remove_association f do %>
      <i class="fas fa-trash delete-vat"></i>
      <% end %>
    </div>
    </div>
</div>

Answer 1

$(document).on('change', '.field', function() { /* recalculate */ });