Trigger One Jquery Function With Another Jquery Function

Question

In the below I have a table row where a calculation happens upon input in .quantity and the result of that calculation is placed in .amount2. This works just fine and works as you see below.

                    <tr class="manifest-row">
                      <td width = 17.5% class="productCode" onchange="populateProduct(this)">{{form.ProductCode}}</td>
                      <td width = 32.5% class="description">{{form.DescriptionOfGoods}}</td>
                      <td width = 12.5% class="quantity" oninput="calculateUnit(this)">{{form.UnitQty}}</td>
                      <td width = 12.5% class="unitType">{{form.Type}}</td>
                      <td width = 10.5% class="price" oninput="calculate(this)">{{form.Price}}</td>
                      <td width = 12.5% class="amount2">{{form.Amount}}</td>
                    
                    </tr>

JS

function calculateUnit(el) {
    // Find the row containing this cell
    var row = el.closest("tr");

    // Get the quantity from the `input` in the `.quantity` cell in this row
    var unitQty = el.querySelector('.quantity input').value;

    // Get the price from the `input` in this cell (could use `e.target` instead)
    var price = row.querySelector('.price input').value;

    // Do the calculation, assign to the `input` in the `.amount` cell in this row
    var lineTotal = unitQty * price;

    row.querySelector('.amount2 input').value = lineTotal;

}

The issue is that there can be many rows, and I have a separate function which sums all the values in the inputs where class is .amount2 and places that sum in a field #id_InvoiceTotal. But this function below does not trigger properly on input because it is being filled instead by the function above. So how can I make the function above trigger the function below? I've seen .trigger() in my online searches but I don't understand how to apply it here.

<script>
$(document).on("input", ".amount2", function() {
  var total = 0;
  var i = 0;
  $('#form_set .amount2').each(function() {

    total += parseInt($('#id_form-'+(i)+'-Amount').val());
    i++;
    $('#id_InvoiceTotal').val(total);
  })
});

</script>

Just move it to a function and call it from calculateUnit()? — crimson589
– crimson589, Commented Aug 12, 2020 at 0:04

Pranav Rustagi · Accepted Answer · 2020-08-12 02:58:08Z

1

You can do it in the same function with just two additional statements like this :

function calculateUnit(el) {
  let total = 0;
  var row = el.closest("tr");
  var unitQty = el.querySelector('.quantity input').value;
  var price = row.querySelector('.price input').value;

  var lineTotal = unitQty * price;

  row.querySelector('.amount2 input').value = lineTotal;

  document.querySelectorAll(".amount2 input").forEach(function(item){
    total += item.value / 1;
  });

  document.querySelector("#id_InvoiceTotal").value = total;

}

edited Aug 12, 2020 at 2:58

answered Aug 12, 2020 at 1:06

Pranav Rustagi

2,7261 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

GXM100 Over a year ago

thank you this is a good answer but the issue is that since this is happening on input, total is added to when the user backspaces. So for example if quantity is 10 and price is 10, amount is initially 100. If I backspace the 0 out of quantity it then adds 10 (1 x 10) and adds that to the total.

Pranav Rustagi Over a year ago

I am really sorry. I missed that. I have updated the code.

GXM100 Over a year ago

hm now it just returns 0. could you elaborate on what you are trying to do for my knowledge?

Pranav Rustagi Over a year ago

Basically, when you would change input in .quantity element, the function in code will be triggered. total will be initialized on each call with 0. I added a forEach loop which will iterate through all the .amount input elements and add their value to total.

Pranav Rustagi Over a year ago

@GXM100 I just checked it. Actually there was a typographical mistake. I had used .amount in place of .amount2. It will work now, I have updated the code.

|

Collectives™ on Stack Overflow

Trigger One Jquery Function With Another Jquery Function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related