0

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

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>
  • Hey sfdcfox, thanks for the response. Using your suggestion, there is no result. I tried with a standard input checkbox to see if it was the html pass through, still no luck... – TheMikeyBoosh Apr 15 '18 at 23:37
  • @TheMikeyBoosh You've done something else wrong, then, because I wrote up a mockup in my org and copied the function verbatim, and it works. I've included my mockup in the answer for you to take a look at/play with. – sfdcfox Apr 15 '18 at 23:57
  • You have the price writing to a div, however I am trying to write to a disabled input field. I have tried the DIV and that works (albeit with Nan value) – TheMikeyBoosh Apr 16 '18 at 0:06
  • (Ignore NaN, my error!) – TheMikeyBoosh Apr 16 '18 at 0:15
  • @TheMikeyBoosh You'd set the value attribute instead, then. I've updated the example to reflect this. If all you're doing is some basic manipulation like this, I'd recommend ditching jQuery; it's simply not necessary. – sfdcfox Apr 16 '18 at 0:22
1

You can try .closest() function of jQuery to get the price from the <apex:outputText correcesponding selected <apex:inputCheckbox.

The .closest() function defined as "For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree."

Please find this below example, the value of <input id="totalprice" /> gets updated when the user selects/deselects any checkbox.

VF Page

<apex:page controller="repeatCon" id="thePage">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <input id="totalprice" />
    <hr/>
    <apex:form>
        <table>
            <tr>
                <td>Price</td>
                <td>Select</td>
            </tr>
            <apex:repeat value="{!decimals}" var="decval" id="theRepeat">
                <tr>
                    <td>
                        <apex:outputText id="gstprice" value="{!decval}"/><br/>
                    </td>
                    <td>
                        <apex:inputCheckbox id="calcprice"/>
                    </td>
                </tr> 
            </apex:repeat> 
        </table>
    </apex:form>
    <script type="text/javascript">
        var j$ = jQuery.noConflict(); 
        j$('input[id*=calcprice]').change(function() {
            var totPrice = 0;
            j$('input[id*=calcprice]:checked').each(function(){
                totPrice = totPrice + parseFloat(j$(this).closest('tr').find('span[id*=price]').text());
             });
            console.log(totPrice);
            j$('#totalprice').val(totPrice);
        });    
    </script>                        
</apex:page>

Controller

public class repeatCon {
    public Decimal[] getDecimals() {
        return new Decimal[]{1.2, 2.3, 3.4, 4.5, 5.6};
    }
}
  • Hi Saroj, thanks for your response. I didnt manage to get this working, with my example. However, it has helped me solve the issue! – TheMikeyBoosh Apr 16 '18 at 10:25
0

Using the both answers, I have solved the issue by utilising JQuery and JS...

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

and the field markup:

<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}"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.