function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dat le ducdat le duc 

Get values from inputField and show its sum to Visualforce Page

Hi,
I have 2 input fields. Once both the values are entered, I need to show its sum on the screen.  I tried but it doesn't work . Please help
My code like this: 
</table>  
	<tr>                        
		<td>
		   <apex:inputField value="{eval__c.A}"  />  
		   <apex:actionSupport event="onchange" rerender="sumwrapper"></apex:actionSupport>                             
		</td>
		<td>
		   <apex:inputField value="{eval__c.B}" />  
		   <apex:actionSupport event="onchange" rerender="sumwrapper"></apex:actionSupport>                           
		</td>
	</tr>   

	<tr>
		<td>Total</td>
		<td>
			<apex:outputPanel id="sumwrapper">
				<apex:outputText value="{!SumOfAB}"/> 
			</apex:outputPanel>
		</td>                        
	</tr>      
</table>
  
public Double getSumOfAB(){
if( (eval__c.A!= null)&&(eval__c.B!= null) ) {
	return  = Double.valueOf(!Eval__c.A) + Double.valueOf(!Eval__c.B) ;
}
  return null;
}

 
GauravendraGauravendra
Hi duc,

For action support to work, it should enclose between the opening and closing of inputField and you need to provide the action properties of actionsupport to call the apex method on change of event.
The VF will look something like this: 
<table>  
            <tr>                        
                <td>
                    <apex:inputText  value="{!sumA}"  >  
                    <apex:actionSupport event="onchange" rerender="sumwrapper" action="{!getSumOfAB}" /> 
                    </apex:inputText>                        
                </td>
                <td>
                    <apex:inputText value="{!sumB}" >  
                    <apex:actionSupport event="onchange" rerender="sumwrapper" action="{!getSumOfAB}" /> 
                    </apex:inputText>
                </td>
            </tr>   
            
            <tr>
                <td>Total</td>
                <td>
                    <apex:outputPanel id="sumwrapper">
                        <apex:outputText value="{!sumAB}"/> 
                    </apex:outputPanel>
                </td>                        
            </tr>      
        </table>

And controller something like this: 
public static Integer sumA{get;set;}
    public static Integer sumB{get;set;}
    public static Double sumAB{get;set;}
    
    public static Double getSumOfAB(){
        System.debug('Inside getSumOfAB');
        if( (sumA!= null)&&(sumB!= null) ) {
            sumAB = Double.valueOf(sumA) + Double.valueOf(sumB) ;
        }
        return null;
    }

Hope this helps.
 
Malika Pathak 9Malika Pathak 9

Hi duc,

please find the solution

<apex:page >
    <apex:form id="form">
        <apex:pageBlock id="block">
            <apex:inputText id="number1" label="Number1" onchange="myFunction()"/>
            <apex:inputText id="number2" label="Number2" onchange="myFunction()"/>
            <apex:pageBlockSection id="sum"></apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    <script>
    function myFunction(){
         var x = parseFloat(document.getElementById("{!$Component.form.block.number1}").value);
          
          var y = parseFloat(document.getElementById("{!$Component.form.block.number2}").value);
         
          if (!isNaN(x) && !isNaN(y)){
              var z = x + y;
              document.getElementById("{!$Component.form.block.sum}").innerHTML = z.toFixed(2);
          }
        }
    </script>
</apex:page>

If you find this solution is helpful for you please mark best answer
dat le ducdat le duc
Thank for your help. 
I have tried all methods above but nothing worked for me.
Malika Pathak 9Malika Pathak 9

Hi duc,

please check this solution

hope this is work for you

<apex:page >
<apex:form id="form">
<apex:pageBlock id="block">
<apex:inputText id="number1" label="Number1" onkeyup="myFunction()"/>
<apex:inputText id="number2" label="Number2" onkeyup="myFunction()"/>
<apex:pageBlockSection id="sum"></apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
function myFunction(){
var x = parseFloat(document.getElementById("{!$Component.form.block.number1}").value);

var y = parseFloat(document.getElementById("{!$Component.form.block.number2}").value);

if (!isNaN(x) && !isNaN(y)){
var z = x + y;
document.getElementById("{!$Component.form.block.sum}").innerHTML = z.toFixed(2);
}
}
</script>
</apex:page>

 

 

If you find this solution is helpful for you please mark the best answer