Skip to content
Advertisement

How to calculate percentage in this JQuery

I have a problem in jQuery in html. Just need some changes in calculation, below are my codes All result will be calculated in one field as I did

Existing: total = expenses – socso – kwsp

The result i need is: total = expenses – socso – (kwsp / 100 * expenses)

Thank you

            <td><input type="hidden" name="txtid[]" value="'.$d["id"].'">
                <input type="text" name="txtbasic[]" class="form-control expenses"></td>
            <td><input type="text" name="txtallowance[]" class="form-control expenses"></td>
            <td><input type="text" name="txtsocso[]" class="form-control socso"></td>
            <td><input type="text" name="txtkwsp[]" class="form-control kwsp"></td>
            <td><input type="text" name="txttotal[]" class="form-control total"></td>


<script>
    $(document).on('keyup', 'input.expenses, input.socso, input.kwsp', function () {

        var total = 0;
        // Adding txtbasic and txtallowance
        $expenses = $(this).parents('tr').find('.expenses');
        $.each($expenses, function (index, object) {
            var val = parseInt($(object).val())
            if(!isNaN(val) && val) {
                total += parseInt($(object).val());
            }
        });

        // Adding txtsocso 
        $socso = $(this).parents('tr').find('.socso');
        $.each($socso, function (index, object) {
            var val = parseInt($(object).val())
            if(!isNaN(val) && val) {
                total -= parseInt($(object).val());
            }
        });

        // Adding txtkwsp
        $kwsp = $(this).parents('tr').find('.kwsp');
        $.each($kwsp, function (index, object) {
            var val = parseInt($(object).val())
            if(!isNaN(val) && val) {
                total -= parseInt($(object).val());
            }
        });

        // Updating the Total
        $expenseTotal = $(this).parents('tr').find('.total');
        $expenseTotal.val(total)
    });
</script>

Advertisement

Answer

As you can see from the example below, instead of use total directly i create for all type a variable then use it for create the mathematical operation

$(document).on('keyup', 'input.expenses, input.socso, input.kwsp', function() {

  var total = 0;
  $expensesval = 0;
  $socsoval = 0;
  $kwspval = 0;
  // Adding txtbasic and txtallowance
  $expenses = $(this).parents('tr').find('.expenses');
  $.each($expenses, function(index, object) {
    var val = parseInt($(object).val())
    if (!isNaN(val) && val) {
      $expensesval += parseInt($(object).val());
    }
  });

  // Adding txtsocso 
  $socso = $(this).parents('tr').find('.socso');
  $.each($socso, function(index, object) {
    var val = parseInt($(object).val())
    if (!isNaN(val) && val) {
      $socsoval += parseInt($(object).val());
    }
  });

  // Adding txtkwsp
  $kwsp = $(this).parents('tr').find('.kwsp');
  $.each($kwsp, function(index, object) {
    var val = parseInt($(object).val())
    if (!isNaN(val) && val) {
      $kwspval += parseInt($(object).val());
    }
  });

  // Updating the Total
  total = $expensesval - $socsoval - ($kwspval / 100 * $expensesval);
  $expenseTotal = $(this).parents('tr').find('.total'); 
  $expenseTotal.val(total)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="hidden" name="txtid[]" value="1">
      <input type="text" name="txtbasic[]" class="form-control expenses"></td>
    <td><input type="text" name="txtallowance[]" class="form-control expenses"></td>
    <td><input type="text" name="txtsocso[]" class="form-control socso"></td>
    <td><input type="text" name="txtkwsp[]" class="form-control kwsp"></td>
    <td><input type="text" name="txttotal[]" class="form-control total"></td>
    </tr>
</table>
Advertisement