This is what I'm trying to accomplish with my VisualForce Page. I would have three input Text sections on my Visual Force page. User would enter an integer that would be the Discount that would be applied to the Total Price.

On the side, I want to show a running total so to speak of what happens to a total price once you enter the inputs for the Discounts. This is what I have so far.

<apex:page standardController="QuoteLineItem" extensions="qliUpdate" recordSetVar="QuoteLineItems" showHeader="true" id="muquote" >
    <apex:form id='SWH'>
    <apex:pageBlock id='JFY'>
       <apex:pageBlockSection columns="2">
       <apex:outputLabel value="Product Discount" for="ProductId"/> 
            <apex:inputText id="ProductID" value="{!Ndisc}" onblur="DisplayRunningTotal('{!$Component.TotalProductId}');"/>

      <apex:outputLabel value="Support Discount" for="ProductId"/>    
      <apex:inputText id="SupportID" value="{!Sdisc}" onblur="DisplayRunningTotal('{!$Component.TotalProductId}');"/>

      <apex:outputLabel value="Additional Discount" for="ProductId"/>   
      <apex:inputText id="AdditionalID" value="{!AddtnlDisc}" onblur="DisplayRunningTotal('{!$Component.TotalProductId}');" />

    <apex:pageBlockSection id='WIH'>
    <apex:outputLabel value="TotalProductValue"  id="TotalProductId"/>
    <apex:outputLabel value="TotalSupportValue"  id="TotalSupportId"/>
    function DisplayRunningTotal(xyz){

    var myOutputLabel = document.getElementById('muquote:SWH:JFY:WIH:TotalSupportId');

The problem right now is the Javascript. I've found a way to modify the Value of the TotalSuportID which is what I want.

This TotalSupportID's value will then eventually change to reflect the changes in the price that happens when you enter values for the Discount input texts above.

However, I have to enter the ID's of all the previous stages that came before the TotalSupportID's ID(my price value) in order to change the value.

i.e. var myOutputLabel = document.getElementById('muquote:SWH:JFY:WIH:TotalSupportId');

This is obviously a problem since if I scale up the VisualForce with more sections, I'll have to keep going back manually to enter in any new ID's that occur before TotalSupportID's section. Is there a way of making this more dynamic?

Thanks! Let me know if any more clarification is needed.

2 Answers 2


The best way to do this would be to use javascript, driven by the change events on the discount and price fields.

This would allow you to perform validation (that the percentage is a number, within an acceptable range etc.) and do the maths on your figures.

  • The Javascript way seems to be the right decision. However I ran into problems implementing it. I've updated my question above with the source code and hopefully a better clarification of the problem.
    – SSadat
    Aug 6, 2013 at 18:58
  • Javascript is the closest to a real time solution, but really this is what rerender and visualforce is designed for.
    – Phil Rymek
    Aug 6, 2013 at 19:21
  • The problem with rerendering in our case is that you could potentially get hit with a salesforce record collection limit error. This is by no means the finished product for our visual force page so rerender is not an optimal solution.
    – SSadat
    Aug 6, 2013 at 19:30
  • In-case future JS implementors are looking for the preferred SF method to add in JS: salesforce.com/us/developer/docs/pages/Content/… Sep 27, 2013 at 19:24

I would also consider using the <apex:actionFunction> tag to accomplish this with Javascript.

Here is the documentation:


This is basically the same question I just answered (in case anyone is wondering) you can use actionFunction to access your controller methods as well as have partial page refresh's and ajax actions with reRender as mentioned.

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.