HarshU ChilzY HarshU ChilzY - 2 months ago 22
HTML Question

jquery bunch of input values multiply by dynamic (another input)

I have a grouped product and that all group can buy within a page. Page has multiple quantity inputs (like 6). And another bulk quantity input.
What it must do is,
After setting the normal product quantities, those values must multiply by the bulk input value.

my code does the multiplication, but not as i expect. It just multiply by the current input value. I want to do as follows.
(1st attempt)
Eg : Input 1 Value = 5, Input 2 value = 2, Input 3 Value = 8. Bulk Value = 10
Results should be : Input 1 = 50, Input 2 = 20, Input 3 = 80

If we gain the bulk value by 1 (2nd attempt)
current Input 1 Value = 50, current Input 2 value = 20, current Input 3 Value = 80. new gained Bulk Value = 11
Results should be : Input 1 = 55, Input 2 = 22, Input 3 = 88



$('#multiply-value').change(function() {
var multiplied = $('#multiply-value').val();

var milti = 0;
var value_of = 0;
var test = 0;

if (this.getAttribute('value') === this.value) {
$(this).data('lastvalue', this.value);
} else {
if(this.value < $(this).data('lastvalue')){
var old = $(this).data('lastvalue');
console.log('decrement');
$('.input-text.qty').each(function() {
var i = 1;

var qty_vals = $(this);
var old_v = $(this).data('lastvalue');
old_test = old_v.val();
test = qty_vals.val();

var cals = 0;

while(i < multiplied ){
cals = +old_test + +cals;
console.log(cals);

i++
}
$(this).val(cals);
test = 0;
});

}
else{
console.log('increment');

$('.input-text.qty').each(function() {
var i = 1;

var qty_vals = $(this);
test = qty_vals.val();

var cals = 0;

while(i <= multiplied ){
cals = +test + +cals;
console.log(cals);

i++
}
$(this).val(cals);
test = 0;
});

}
// console.log(this.value < $(this).data('lastvalue') ? 'decrement' : 'increment');
$(this).data('lastvalue', this.value);
}



})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class=""bunch-of-inputs">
<input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
<input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
<input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
</div>
<input id="multiply-value" type="number" value="1">
</div>




Answer

why not to store the original value of each field at another field rather than the value field ?

so the html will be :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <div class=""bunch-of-inputs">
      <input type="text" name="super_group[50]" maxlength="12" value="5" title="Qty" class="input-text qty" data-default="5">    
      <input type="text" name="super_group[50]" maxlength="12" value="2" title="Qty" class="input-text qty" data-default="2">
      <input type="text" name="super_group[50]" maxlength="12" value="8" title="Qty" class="input-text qty" data-default="8">
   </div>
   <input id="multiply-value" type="number" value="1" >
</div>

And the js will be:

$('#multiply-value').on('input',function() {
    var multiplied = $('#multiply-value').val();
    $('.input-text.qty').each(function() {
        $(this).val($(this).data('default') * multiplied);
    });
})

this way we don't need to store the previous value, we have the default value any time