how to write JavaScript and add loop for following to do math operations when i enter value in input-CodePudding

What I am trying to do is simple math operations but with my code below I am able to apply it to only one set of inputs. But I want it do same to all set of inputs.

$('.num,.numm,.gen').keyup(function() {
  var closing = parseFloat($('.num').val());
  var total = parseFloat($('.numm').val());
  var gen = $('.gen').val();
  document.getElementById('sales').innerHTML = (total - closing);
  document.getElementById('saletotal').innerHTML = ((total - closing) * gen);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label id="sales">0</label>
<label id="saletotal">0</label>

<br>

<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label id="sales">0</label>
<label id="saletotal">0</label>

<br>

<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label id="sales">0</label>
<label id="saletotal">0</label>

CodePudding user response：

First you need to fix your ids - ids should be unique so change them to classes instead. Then in your event, you need to get the current input that is keyupped.

From that you can use a combination of nextAll and first to get the nearest sibling with the class you are after to do your calculations and update the labels

$('.num').keyup(function() {
  var $input = $(this); // get the input that has been key upped
  var closing = parseFloat($input.val());
  var total = parseFloat($input.nextAll('.numm').first().val());
  var gen = parseFloat($input.nextAll('.gen').first().val());
  var sales = total - closing;
  $input.nextAll('.sales').first().html(sales);
  $input.nextAll('.saletotal').first().html(sales  * gen);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label >0</label>
<label >0</label>

<br>

<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label >0</label>
<label >0</label>

<br>

<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label >0</label>
<label >0</label>

If you can change the html, I would wrap each set in it's own div and then the you could make the jquery a little neater:

$('.num').keyup(function() {
  var $input = $(this); // get the input that has been key upped
  var $parent = $input.parent();
    var closing = parseFloat($input.val());
  var total = parseFloat($parent.find('.numm').val());
  var gen = parseFloat($parent.find('.gen').val());
  var sales = total - closing;
  $parent.find('.sales').html(sales);
  $parent.find('.saletotal').html(sales * gen);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" data-id="55"  name="close_val[]">
  <input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
  <input type="hidden" id="sales1177" name="total[]"  value="711">
  <label >0</label>
  <label >0</label>
</div>
<div>
  <input type="text" data-id="55"  name="close_val[]">
  <input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
  <input type="hidden" id="sales1177" name="total[]"  value="711">
  <label >0</label>
  <label >0</label>
</div>
<div>
  <input type="text" data-id="55"  name="close_val[]">
  <input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
  <input type="hidden" id="sales1177" name="total[]"  value="711">
  <label >0</label>
  <label >0</label>
</div>

CodePudding user response：

Here is another version:

$('.num').each(function(i,el) {
   const gen =  $("~ .gen", this).val();
   const numm =  $("~ .numm", this).val();
   $(this).on("input", ev => {
    let sales = numm - this.value;
    $("~ .sales", this).first().text(sales);
    $("~ .saletotal", this).first().text(sales*gen);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="30.00">
<input type="hidden" id="sales1177" name="total[]"  value="100">
<label >0</label>
<label >0</label>

<br>

<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="50.00">
<input type="hidden" id="sales1177" name="total[]"  value="400">
<label >0</label>
<label >0</label>

<br>

<input type="text" data-id="55"  name="close_val[]">
<input type="hidden" name="GeneralRate[]" id="GeneralRate"  value="70.00">
<input type="hidden" id="sales1177" name="total[]"  value="711">
<label >0</label>
<label >0</label>