Calculate sum based on selected item

Question

I have a form in which the user has to select the item name, item attributes and enter the item quantity. A new form is cloned if the user wants more items.

I want to calculate the sum of all quantities of specific item name.

Use Case:

The user chooses item name ABC, attributes and enters in the quantity field 100
In the second "form" (div container), selects ABC, selects other attributes and enters quantity 50
In the third "form" (div container) selects PQR, attributes, enters quantity 430
In the 4th "form" (div container) selects PQR, chooses attributes, enters quantity 150

I need to add the sum of all PQR and ABC and display value in their respective input fields.

What I have done so far:

$('.quantity-input').on('blur', function() {
  getTotalQuantity();
});


function getTotalQuantity() {
  var $qr = $('.quantity-input');
  var sum = 0;
  var item_name;

  $qr.each(function(i, obj) {
    var self = $(this);
    item_name = self.closest(".abc-form").find('.select-item-name').val();
    item_name = item_name.replace(/\s/g, '').toLowerCase();

    console.log(item_name);
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });

  var input_item_name = $('input[data-item-name="' + item_name + '" ]');

  if (input_item_name.length) {
    input_item_name.val(sum);

  } else {
    $('.add-item-quantity').append('<p><input type="text" value="' + sum + '" class="' + item_name + '" data-item-name="' + item_name + '"/></p>');
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>

<div class="add-item-quantity">
</div>

While this code calculates the sum, it calculates the sum of all selected items and shows in one input field. I want to calculate the sum of the inputs based on item names selected and each selected item name's quantity should show the sum in a different input field. For eg (ABC's sum will display in one input field, while PQR's sum will display in another input field.

Any help would be appreciated.

I'm using jQuery `clone` method to replicate the form. But for brevity, I have hardcoded the containers in the snippet provided. https://api.jquery.com/clone/ — input, Feb 12 '18 at 19:24
@blackandorangecat I've removed the button. I had added it there for testing before publishing the post. Sorry about that. — input, Feb 12 '18 at 19:32

score 1 · Accepted Answer · answered Feb 12 '18 at 19:40

You can create sum as an object that has properties equal to item names, and then add the relevant sums per item name.

I would also destroy the output every time you update it, as some item names might be removed from the selections, and then you would need to remove those explicitly from the output. It is easier to just start from scratch.

Also make sure you respond to a change in item name selection to update the output:

$('.quantity-input,.select-item-name').on('change', function() {
  getTotalQuantity();
});


function getTotalQuantity() {
  var $qr = $('.quantity-input');
  var sum = {};
  var item_name;

  $qr.each(function(i, obj) {
    var self = $(this);
    item_name = self.closest(".abc-form").find('.select-item-name').val();
    item_name = item_name.replace(/\s/g, '').toLowerCase();

    if (!isNaN(this.value) && this.value.length != 0) {
      sum[item_name] = (sum[item_name] || 0) + parseFloat(this.value);
    }

  });
  
  $('.add-item-quantity').empty();
  for (item_name in sum) {
      $('.add-item-quantity').append('<p>' + item_name + ':' + 
            '<input type="text" value="' + sum[item_name] + '" class="' + item_name + '" data-item-name="' + item_name + '"/></p>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<button class="calc">
  Calculate
</button>

<div class="add-item-quantity">
</div>

Calculate sum based on selected item

1 Answers1