function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rahul BorgaonkarRahul Borgaonkar 

Update outputtext value in pageblocktable using javascript

Hello All,

I have created a VF page having pageblocktable tag. There are 2 coulmns, first is apex:input and other is apex:outputtext. On input tag using onchange executing a javascript. In this javascript I am using apex:input value and calculating a outputtext value using a formula. I am getting correct formula value but not able to update in outputtext. Please find VF for ref.
<apex:page standardController="Account" tabStyle="Account" extensions="MonthlyDeductionsController" docType="html-5.0" sidebar="false" id="pageid">
    <apex:sectionHeader title="{!account.name}"/>
    <apex:form id="formid" >
        <script type="text/javascript">
        function changeesi1(input, er, er_rate, inx)
        {
            //alert(input.value);
            //alert(er);
            //alert(er_rate);
            //alert(inx);
            //alert(er);
            erid = er;
            //alert(erid);
            er = document.getElementById(erid).value;
            alert(er);
            document.getElementById(erid).value = Math.ceil(input.value * er_rate/100);;
            alert(document.getElementById(erid).value);
        }
        </script>

            <apex:pageBlockTable value="{!deductiondata}" var="ddlist" id="ddid">
                <apex:column headerValue="ESI Wages 1">
                    <apex:input id="esiwgid1" size="10" value="{!ddlist.ESIWages}" onchange="changeesi1(this, '{!$Component.ER}', '{!currentPeriod.ESI_ER_Rate__c}', '{!ddlist.index}');" />
                </apex:column>

                <apex:column headerValue="ESI ER({!currentPeriod.ESI_ER_Rate__c}%)" id="erc">
                    <apex:outputText id="er" value="{0, number, Rs #####0.00}">
                        <apex:param value="{!ddlist.ER}"/>
                    </apex:outputtext>
                </apex:column>
            </apex:pageBlockTable>
    </apex:form>
</apex:page>
It should update/refresh {!ddlist.ER} value using javascript immidiately after onchange. Could you please tell what is missing in javascript?

I have achieved this using apex function using actionFunction but process is slow and want to calculate and refresf {!ddlist.ER} value in page it self using javascript function instead of apex function. Please let me know if you need more details.

Best Regards,

Rahul
 
sachin kadian 5sachin kadian 5
You cannot simply get the element by using "document.getElementById(erid)" in salesforce because salesforce adds some prefix to ids. I think  you can do it like this.

document.getElementById('{!$Component.er}').innerHTML = Math.ceil(input.value * er_rate/100);


(innerHTML because outputText will b rendered in to a span)


Let me know if this helps you.