How to find percentage in jQuery by dynamic inputs

user_9660462 0
Viewed 84

I want to find discount amount or percentage, both are working fine but I can't do a little adjustment to it

I want that if I input 10% of 0 or null, the total should show 0. Currently it will show 10.
Also it updates value in the second calculation as well I want on row only

  $(document).on('change', '.amountOrPercent', function() {
  var amountOrPercent = $(this).find(":selected").val();
  if (amountOrPercent == 'amount') {
    $(this).closest('.divForCalculation').find('.extraForPercentage').remove();
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '4px');
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '1');
  } else if (amountOrPercent == 'percentage') {
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '2');
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '0');
    $(this).closest('.divForCalculation').append('<div class="extraForPercentage" style="flex: 1"><span class="mr-2 px-3 pt-2">Of</span><div style="display: inline;"><input type="text" class="form-control totalof" placeholder="0" required style="display: inline; width: 60%;" value=""></div></div>');
  }
});


$(document).on("change keyup keypress", ".discountAmount, .totalof", function() {
  var discountAmount = 0;
  var discountPercentage = 0;
  var totalof=0;
  var result=0;
  discountAmount = $(".discountAmount").val();
  totalof=$(".totalof").val();
  if(totalof==null || totalof==0){
  totalof=0;
  result=-discountAmount;
  }
else
    {  
    result = -parseFloat((parseInt(totalof)/100*parseInt(discountAmount)));
}
    $('.invoiceItemAmount').val(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mr-2 divForCalculation" style="display: flex" >
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total<label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">

<hr>

<div class="mr-2 divForCalculation" style="display: flex" >
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total<label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">

**Origianl HTML Structure** 
<div class="inv-table-body">
  <div class="body-row row m-0">
    <div class="px-2 col-3">
      <select name="invoice_type" class="form-control invoiceType" required>
        <option value="newitem">New Item</option>
        <option value="presetitem">Preset Item</option>
        <option value="discount">Discount</option>
        <option value="subsidy">Subsidy</option>
      </select>
    </div>
    <div class="px-2 col-6 item-description" style="display: flex;">
      <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
    </div>
    <div class="px-2 col-2">
      <input type="number" class="form-control invoiceItemAmount" name="amount[]" placeholder="0" value="" required>
    </div>
    <div class="col-1 del-icon-container"><i class="fas fa-trash"></i></div>
  </div>
</div>

Appending with

$(document).on('change', '.invoiceType', function() {
let $field = $(this);
let invoiceType = $field.val(); // :selected not needed

if (invoiceType === 'newitem') {
    $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`);
} else if (invoiceType === 'presetitem') {
    $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`);
} else if (invoiceType === 'discount') {
    $field.closest('.body-row').find('.item-description').html(`<div class="mr-2 divForCalculation" style="flex: 1">
        <div style="display: flex" class="calculation-container">
            <div class="mr-2" style="flex: 1">
                <div class="input-group my-group">
                    <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
                    <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
                        <option value="amount">$</option>
                        <option value="percentage">%</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 2">
    `);
} else if (invoiceType === 'subsidy') {
    $field.closest('.body-row').find('.item-description').html(`<div class="mr-2 divForCalculation" style="flex: 1">
        <div style="display: flex" class="calculation-container">
            <div class="mr-2" style="flex: 1">
                <div class="input-group my-group">
                    <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
                    <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
                        <option value="amount">$</option>
                        <option value="percentage">%</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 2">
    `);
}
});
html jquery javascript
2 Answers

You can use .closest() , nextAll() and :first to target your input and change value there . Also , you can get selected value from select-box depending on this set required value to your input-box.

Demo Code :

$(document).on('change', '.amountOrPercent', function() {
  var amountOrPercent = $(this).find(":selected").val();
  if (amountOrPercent == 'amount') {
    $(this).closest('.divForCalculation').find('.extraForPercentage').remove();
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '4px');
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '1');
  } else if (amountOrPercent == 'percentage') {
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '2');
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '0');
    $(this).closest('.divForCalculation').append('<div class="extraForPercentage" style="flex: 1"><span class="mr-2 px-3 pt-2">Of</span><div style="display: inline;"><input type="text" class="form-control totalof" placeholder="0" required style="display: inline; width: 60%;" value=""></div></div>');
  }
});


$(document).on("change keyup keypress", ".discountAmount, .totalof ,.amountOrPercent", function() {
  var selector = $(this).closest(".divForCalculation") //get closest div
  var discountAmount = 0;
  var discountPercentage = 0;
  var totalof = 0;
  var result = 0;
  discountAmount = selector.find(".discountAmount").val();
  totalof = selector.find(".totalof").val();
  //added cond if not visible
  if (totalof == null || totalof == 0 || !selector.find(".totalof").is(":visible")) {
    totalof = 0;
    //change value depending on select values
    result = selector.find(".amountOrPercent").val() == "amount" ? -discountAmount : 0;
  } else {
    result = -parseFloat((parseInt(totalof) / 100 * parseInt(discountAmount)));
  }
  //use nextAll..
  selector.nextAll('.invoiceItemAmount:first').val(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mr-2 divForCalculation" style="display: flex">
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total</label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">
<hr>

<div class="mr-2 divForCalculation" style="display: flex">
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total</label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">

user_106064000

Can you try with below one:

if(totalof === '' || totalof === null || totalof === 0){
    totalof = 0;
    result = 0;
    console.log('result ', result)
} else if(!isNaN(totalof)) {
    
        result = -parseFloat((parseInt(totalof)/100*parseInt(discountAmount)));
}
user_12452340
Related