[SalesForce] Get field value in apex:repeat row, when checkbox is selected

I'm trying to populate an amount field at the top of a table when a row's checkbox is selected, this is only for UI purposes and does not need to be written to the DB.

The checkbox itself is a field on a record, so using $(this).val to get its value doesn't work. There is another field on the row, which is called Total_Including_GST__c, this is the field that i need to sum.

How would I write the JS to grab the fields value?

VF:

<input class="form-control" style="height:42px;" disabled="disabled" id="price" type="number" name="amount" placeholder="Selected Amount"/>

<table id="invoicesTable" class="table table-striped" style="width:100%;">
    <thead class="tableHeadBlue">
    <tr>
        <td>Invoice Number</td>
        <td>Invoice Date</td>
        <td>Invoice Amount</td>
        <td>Remittance Amount</td>
        <td>Remittance #</td>
        <td>Balance</td>
        <td style="text-align: center;">Reconciles? &nbsp;&nbsp;<apex:inputCheckbox style="font-size:30px;" styleClass="check" onclick="selectAllCheckboxes(this,'inputId1')"/></td>
        <td align="right" style="width:120px;">Action</td>
    </tr>
    </thead>
    <tbody>
    <apex:repeat value="{!getInvoicesOut}" var="invOut">
        <tr>
            <td><apex:outputField styleClass="form-control" value="{!invOut.OrderNumber}"/></td>
            <td><apex:outputField styleClass="form-control" value="{!invOut.EffectiveDate}"/></td>
            <td><apex:outputField id="totalAmount" styleClass="form-control total" value="{!invOut.Total_Including_GST__c}"/></td>
            <td><apex:inputField styleClass="form-control" value="{!invOut.Payment_Received__c}" html-placeholder="$0.00"/></td>
            <td><apex:inputField styleClass="form-control" value="{!invOut.Payment_Received_Number__c}" html-Placeholder="Remittance #"/></td>
            <td><apex:outputField styleClass="form-control" value="{!invOut.Balance_Calculated__c}"/></td>
            <td>
                <label class="formCheck">
                    <apex:inputCheckbox id="inputId1" styleClass="check" style="font-size:24px;" onchange="selectedCheckbox();" value="{!invOut.Remittance_Reconciles__c}"/>
                    <!--<input type="checkbox" id="inputId2" class="check" style="font-size:24px;" value="{!invOut.Total_Including_GST__c}"/>-->
                </label>
            </td>
            <td><apex:outputlink style="text-decoration:none;" styleClass="pull-right" target="__blank" value="/{!invOut.id}">View Invoice</apex:outputlink></td>
        </tr>
    </apex:repeat>
    </tbody>
</table>

JS:

$('input[class="check"]').change(function(){
    var totalprice = 0;

    $('input[class="check"]:checked').each(function(){
        totalprice = totalprice + parseInt($(this).val());
    });

    $('#price').val(totalprice);
});

Best Answer

Since the field is read-only, I'd suggest you just move the data to the checkbox itself:

<apex:inputCheckbox 
    styleClass="check" 
    style="font-size:24px;" 
    html-data-total-including-gst="{!invOut.Total_Including_GST__c}"
    onchange="updateTotals();" 
    value="{!invOut.Remittance_Reconciles__c}"/>

Which you can get in your method:

function updateTotals() {
  var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),
    (a,v) => a + parseFloat(v.dataset.totalIncludingGst), 0);
  document.querySelector("#price").innerText = "$"+sum;
}

Self-Contained Example

Controller

public class q214935 {
    public Decimal[] values { get; set; }
    public q214935() {
        values = new Decimal[] { 1.2, 2.3, 3.4, 4.5, 5.6 };
    }
}

Page

<apex:page controller="q214935">
    <input disabled="disabled" id="price" />
    <script>
    function updateTotals() {
        var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),
            (a,v) => a + parseFloat(v.dataset.totalIncludingGst), 0);
        document.querySelector("#price").value = "$"+sum;
    }
    </script>
    <apex:form>
    <apex:pageBlock>
        <apex:pageBlockTable value="{!values}" var="value">
            <apex:column>
                <apex:inputCheckbox styleClass="check"
                                    onchange="updateTotals()"
                                    html-data-total-including-gst="{!value}" />
            </apex:column>
            <apex:column>
                {!value}
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form>
</apex:page>
Related Topic