How to populate input fields using jQuery

Question

Below is a screenshot of my system which allows me to record payments against invoices (invoices are called tenant charges in my system).

I have an input labelled 'Total Amount Paid' with a button next to it labelled 'Allocate'. When I click this button, I want the 'Amount Received' inputs to be populated automatically starting with the first to the last. For example, if I entered '200' into the 'Total Amount Received' input and pressed 'Allocate', it would populate the first 'Amount Received' field with '189.59' and the second with '10.41'.

HTML;

    <fieldset>
    <legend>Outstanding Tenant Charge Details</legend>
<div style="padding:5px;"><label for="total_amount_paid">Total Amount Paid (&pound;):</label>
    <input type="number" id="total_amount_paid" value="0.00">&nbsp;<button type="button" id="allocate_total_amount_paid">Allocate</button></div>
<table class="solid" style="margin:5px;"><tr>
        <th>Tenant Charge #</th>
        <th>Date</th>
        <th>Due Date</th>
        <th>Charge Total</th>
        <th>Amount Paid</th>
        <th>Amount Due</th>
        <th>Amount Received (&pound;)</th><th>Management Fee at 7.00%</th></tr><tr>
        <td><a href="view_tenant_charge.php?tenant_charge_id=217" target="_blank">217</a></td>
        <td>09/11/15</td>
        <td>09/12/15</td>
        <td>&pound;250.00</td>
        <td>&pound;60.41</td>
        <td>&pound;189.59
        <input type="hidden" name="amount_outstanding[]" value="189.59">
        </td>
        <td>
        <input type="number" name="amount_received[]" class="amount_received" value="0.00" max="189.59" required>&nbsp;<button class="pay_in_full" type="button">Pay in Full</button>
        <input type="hidden" name="tenant_charge_id[]" value="217">
        <input type="hidden" name="tenant_charge_tenancy_id[]" value="69"></td><td><input type="checkbox" name="management_fee_invoice[]" value="1"checked="checked"> <label>Generate &amp; Post Invoice</label></td></tr><tr>
        <td><a href="view_tenant_charge.php?tenant_charge_id=283" target="_blank">283</a></td>
        <td>09/12/15</td>
        <td>09/01/16</td>
        <td>&pound;250.00</td>
        <td>&pound;0.00</td>
        <td>&pound;250.00
        <input type="hidden" name="amount_outstanding[]" value="250.00">
        </td>
        <td>
        <input type="number" name="amount_received[]" class="amount_received" value="0.00" max="250.00" required>&nbsp;<button class="pay_in_full" type="button">Pay in Full</button>
        <input type="hidden" name="tenant_charge_id[]" value="283">
        <input type="hidden" name="tenant_charge_tenancy_id[]" value="69"></td><td><input type="checkbox" name="management_fee_invoice[]" value="1"checked="checked"> <label>Generate &amp; Post Invoice</label></td></tr></table></fieldset>

jQuery;

// allocate button

$( "#allocate_total_amount_paid" ).click(function() {

var totalAmountPaid = $("#total_amount_paid").val();

$( ".amount_received" ).each(function( index ) {
  //console.log( index + ": " + $( this ).text() );
  alert(index + totalAmountPaid);
});

});

Answer 1

First I'd structure your table into thead and tbody for more efficient looping, and add a distinctive class name to it, and add a hidden input with the due sum to each row. Here's a basic example.

 var sum = parseFloat($('#total_amount_paid').val()); $('.tenants tbody tr').each(function() { var due = parseFloat($('.amount_due', this).val()); var amount = (sum >= due) ? due : sum; $('.amount_received', this).val(amount); sum -= amount; }); 

 <table class="tenants"> <thead> <tr> <th>...</th> <th>Amount due</th> <th>Amount received</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td> &pound;123.45 <input type="hidden" class="amount_due" value="123.45" /> </td> <td> <input class="amount_received" /> </td> <td>...</td> </tr> ... </tbody> </table> 

Answer 2

In your loop, get the amount from the previous column, and subtract it from the total.

$( "#allocate_total_amount_paid" ).click(function() {
    var totalAmountPaid = parseFloat($("#total_amount_paid").val());
    $( ".amount_received" ).each(function( index ) {
        var thisAmount = parseFloat($(this).closest("td").prev("td").find("input[name^=amount_outstanding]").val());
        if (thisAmount <= totalAmountPaid) {
            // If we have enough for this payment, pay it in full
            $(this).val(thisAmount);
            // and then subtract from the total payment
            totalAmountPaid -= thisAmount;
        } else {
            // We don't have enough, so just pay what we have available
            $(this).val(totalAmountPaid);
            // Now we have nothing left, use 0 for remaining rows
            totalAmountPaid = 0;
        }
    });

});