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>