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);
});

});

[This is fairly basic JavaScript functionality.](http://api.jquery.com/val/) What have you tried so far? — Blazemonger, Dec 18 '15 at 16:43
@Blazemonger - I know how to set the value of an input field using jQuery. What I can't understand is the logic of how to do it. I'd imagine some type of loop? I haven't tried any code at the moment. — Michael LB, Dec 18 '15 at 16:47
You'd trigger each `input` update by adding a [`.change()`](https://api.jquery.com/change/) event handler to the button. — Blazemonger, Dec 18 '15 at 17:01
[This](http://stackoverflow.com/questions/25155384/is-the-sort-order-of-jquerys-each-guaranteed) should help you — kero, Dec 18 '15 at 17:05
@Blazemonger - Yes, I understand that, what I need help with is the actual code to run when the 'Allocate' button is pressed. I'd imagine the logic is something like looping through each 'Amount Received' field until there are no funds left. I don't know how to do that in jQuery hence my request for help. — Michael LB, Dec 18 '15 at 17:06
Where is the "Total Amount Received" field? I only see "Total Amount Paid". — Barmar, Dec 18 '15 at 17:17
An aside: if you're using `input type="number"`, you might want to add `step="0.01"` to each of those. — Blazemonger, Dec 18 '15 at 17:20
@Barmar - Sorry, it should read "Total Amount Paid", I have updated my question. — Michael LB, Dec 18 '15 at 17:31

score 1 · Answer 1 · answered Dec 18 '15 at 17:23

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>

score 1 · Accepted Answer · answered Dec 18 '15 at 17:28

1

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;
        }
    });

});

answered Dec 18 '15 at 17:28

Barmar

741,623
53
500
612

What does this line do? var thisAmount = parseFloat($(this).closest("td").prev("td").find("input[name^=amount_outstanding]").val()); – Michael LB Dec 18 '15 at 17:34
Could we use the 'max' attribute of the field instead for this line? – Michael LB Dec 18 '15 at 17:35
var thisAmount = $(this).attr('max'); – Michael LB Dec 18 '15 at 17:35
Yes, you could. I didn't notice that attribute in the HTML. – Barmar Dec 18 '15 at 17:36
1

`$(this).closest("td")` gets the cell that contains the current input in the loop. `.prev("td")` gets the cell before it. `.find("input[name^=amount_outstanding]")` gets the input whose name begins with `amount_outstanding` in that cell. Which part of this is hard to understand? – Barmar Dec 18 '15 at 17:38
Thanks for the explanation – Michael LB Dec 18 '15 at 17:40

How to populate input fields using jQuery

2 Answers2