Updating and displaying VisualForce output Label in realtime without refreshing the page

Question

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>
    <apex:pageBlockSection id='WIH'>
    <apex:outputLabel value="TotalProductValue"  id="TotalProductId"/>
    <apex:outputLabel value="TotalSupportValue"  id="TotalSupportId"/>
        </apex:pageBlockSection>    
    </apex:pageBlock>>
    </apex:form>    
<script>
    function DisplayRunningTotal(xyz){

    var myOutputLabel = document.getElementById('muquote:SWH:JFY:WIH:TotalSupportId');
    myOutputLabel.innerHTML='jhsdfsdfjksdnkf';
    }    
</script>    
</apex:page>

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.

Answer 1

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.

Answer 2

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

Here is the documentation:

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_actionFunction.htm

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.