Question

Please refer to the sample link first to understand my issue.

first im dividing a value and displaying each divided values into input text field.

you can see the sample here.. http://fahidmohammad.in/demo/sample/

in the sample link – – the total is the amount to be divided and number of installment is the number of split.

I know what you might be thinking…what exactly i need right??

Here comes the second stage of the process:

now i have the splits, what i need actually is, if i change the value form any of the splitted input the next value or the remaining should auto sum with the total amount.

eg…

Total Amount = 9000
Number of installment = 3

Split1 = 3000
Split2 = 3000
Split3 = 3000

if i decide to change split1 to 4000 then the remaining splits should auto sum.

eg..

Split1 = 4000
Split2 = 2500 [auto sum]
Split3 = 2500 [auto sum]

Mathematically i know the process but how do i accomplish this in jquery coz the number of splits may vary upon the user input.

What is the right method to follow???

Answer 1

here’s what you need to do…

i’d suggest to first start by adding elements like

var numInst = $('input[name="ni"]').val();
var total = $('input[name="ta"]').val();
var payment = total / numInst;

for(var i = 0; i < total; i++){
    $('<input/>').attr({
        'type' : 'text',
        'name' : 'sum[]'
    }).val(payment).addClass('installment').appendTo('#inner');
}

i’m freehanding this so give or take some errors…but that’s a much more efficient way to do it rather than appending strings as html.

for your installment onchange event:

$('.installment').change(function(){
    var numInst = $('input[name="ni"]').val();
    var total = $('input[name="ta"]').val();
    var otherPayment = (total - $(this).val()) / (numInst - 1);

    $(this).addClass('dontChange');

    $.each($('.installment'),function(i, val){
        if(!($(this).hasClass('dontChange')){
            $(this).val(otherPayment);
        }
    });

    $(this).removeClass('dontChange');
});

like i said, i freehanded all this, but i think the logic is solid. just add a class to the one that was manually changed temporarily, then loop through the installment class text boxes and change the value to equal the total, minus the value that was manually entered, divided by 1 less payment that what ni equals.

the only problem i might foresee is that without setting a flag to those boxes that have been manually changed, any changes will be overwritten if the user changes another installment boxes.

easy fix would be to move the $(this).removeClass(‘dontChange’); line from the installment onchange function to the end of your ni and ta onchange handler. just change $(this) to $(‘.installment’)

hope it helps!