dynamically recalculate the input field values based on the total amount with jQuery

Question

I have a page which has a Total Amount input field and an HTML table with rows having column showing the item amount(from db) and a input field against it(autopopulates the split amt from the Total Amount and also allows user input). My requirement is, when the user inputs the total amount, it should get split into the input boxes(applied amount column) in the table based on their item amount(Item Amount column prepopulated from db)

Eg: Input Amount:100

Item Amount | Applied amount(input box)
25              25
100             75
50              0

---

I'm able achieve this by:

var oidata = [];
var poidata = "", poibalance = "";
function applyAmount() {
oidata = [];
poidata = "", poibalance = "";
var total = parseFloat(document.getElementById("total-amount").value);
if(total>0){
    $('#ao_amt_tbl tbody tr td[data-value]').each(function() {
    var dataValue =  this.getAttribute("data-value");
    var dataId =  this.getAttribute("data-id");
    var $row = $(this).closest("tr");
    var priceAmt = 0;
    if(dataValue > 0){
        if(total > dataValue || 
            total == dataValue){
                total = total - dataValue;
                $row.find('.applied').val(dataValue);
                $row.find('.balance').val('0.00');
                oidata.push(dataId);
               }
               else{                            
                priceAmt = dataValue - total;
                $row.find('.applied').val(total.toFixed(2));
                $row.find('.balance').val(priceAmt.toFixed(2));
                if(total>0){
                    poibalance=priceAmt;
                    poidata=dataId;
                    oidata.push(dataId);
                }
                total=0;                                                        
                }
              }                 
            });
    if(total>0)
            alert('$' + total.toFixed(2) + ' remaining.');
}

the HTML is-

    <table id='ao_amt_tbl'>
    <thead>
    <tr>
    <th>Amount</th><th>Amount Applied</th><th>Balance</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td data-id="19185" data-value="25">$25</td>
    <td class="ao_td_jn"><input type="text" name="applied-amount" id="total1" placeholder="0.00" class="applied"></td>
    <td><input type="text" name="balance-amount" id="balance1" placeholder="0.00" class="balance"></td>
    </tr>
    <tr>
    <td data-id="19186" data-value="100">$100</td>
    <td class="ao_td_jn"><input type="text" name="applied-amount" id="total2" placeholder="0.00" class="applied"></td>
    <td><input type="text" name="balance-amount" id="balance2" placeholder="0.00" class="balance"></td>
    </tr>
    <tr>
    <td data-id="19186" data-value="50">$50</td>
    <td class="ao_td_jn"><input type="text" name="applied-amount" id="total2" placeholder="0.00" class="applied"></td>
    <td><input type="text" name="balance-amount" id="balance2" placeholder="0.00" class="balance"></td>
    </tr>
    </tbody>

Now suppose I adjust the second row 'applied-amount' input value it should recalculate and distribute the 100 dollar among other rows. For example, change the second input value to 50, it should recalculate and distribute the values as 25, 50, 25. and recalculate the balance field as 0, 50, 25.

Using the above example; If the Input Amount is 100, the system should recalculate the rest of the Applied Amount input vales based on the balance amount from Input Amount(100)

Item Amount | Applied amount(input box)
25              25
100             50  <-- user input
50              25  <-- script needs to automatically recalculate and change the rest of the Applied amount input with balance amount (100 - 75 = 25).

Basically, the script needs to loop through the 'Applied amount' input boxes and split the Input Amount(100), from top to bottom until the Input amount is 0. Hope I'm clear with my requirement. Any help will be greatly appreciated. thanks

Answer 1

use

$(document).ready(function () {
$('input').keydown(function () {
    applyAmount();
});

});

Answer 2

you can also use

onkeydown=applyAmount();

inside the tag of whichever input tag you want.

Answer 3

thankyou all.. I got the solution. Did something like this;

 $(function (){
$("input[id*='total-']").on('keyup', function() {       
    var ttl = //get Input Amount
    var gid = $(this).parents('tr').find('.ao_td_jn').attr('data-id');
    var Ajt = this.value;
    ttl = ttl - Ajt;
    if(ttl>0){
        $('#ao_amt_tbl tr td[data-value]').each(function() {
        var dv =  this.getAttribute("data-value");
        var dataId =  this.getAttribute("data-id");
        var $row = $(this).closest("tr");           
        if(gid == dataId){
        var balAmt = dv - Ajt;
        $row.find('.balance').val(balAmt.toFixed(2));
        }
        else{
        ...
        }
        ...
        }
    }
 });