Passing multiple Parameters in ActionFunction in Visualforce

Calling Apex Method from the Visualforce page is the one of the most required functionality in application development in Salesforce. <apex:actionFunction> is one of the method used to achieve this functionality.

Most often we need to supply the arguments in <apex:actionFunction> and in this article I will demonstrate the way in which we can pass one or more than one parameter.
The output of the example will be like below screen.

Create Apex class with following code:

public with sharing class PassParameterActionFunction {
    public String val{get;set;}
    public String enteredText1{get;set;}
    public String enteredText2{get;set;}

    public void echoVal()
    {
     val = 'You have entered : 1 - '+enteredText1+' 2 -'+enteredText2;
    }
}

In above code, the variables “enteredText1“ and “enteredText2“ will be the parameters supplied by the javascript and variable “val“ will display the concatenated result.
Now create the Visualforce page with code:

<apex:page controller="PassParameterActionFunction">
<style type="text/css">
.pointer
{
    cursor:pointer;
    border:1px solid #ccc;
    padding:5px;
}
</style>
<apex:form id="frm">
<apex:outputPanel id="resultPanel">
<apex:actionStatus startText="requesting..." stopText="" id="myStatus" />
<br />
<b><apex:outputLabel value="{!val}" /></b>
</apex:outputPanel>
<br />
Enter Value 1 :
<apex:inputText id="txt1" />
<br />
Enter Value 2 :
<apex:inputText id="txt2" />
<br />
<br />
<br />
<span class="pointer" onclick="callActionMethod()"> Click Me !!! </span>

<apex:actionFunction name="echo" action="{!echoVal}" reRender="resultPanel" status="myStatus">
<apex:param name="firstParam" assignTo="{!enteredText1}" value="" />
<apex:param name="secondParam" assignTo="{!enteredText2}" value="" />
</apex:actionFunction>
</apex:form>
<script type="text/javascript">
function callActionMethod()
{
 var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;
 var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;
 /*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" */
 echo(txtVal1,txtVal2);
}
</script>

</apex:page>

The below code snippet is used to define the “actionFunction“ in visual force page.
To supply the parameter, we have to use “apex:param“ tag. Attribute “assignTo“ will assign the parameter to variable name specified in Apex code. Here we have assigned the value to variable “enteredText1“ and “enteredText2“.

<apex:actionFunction name="echo" action="{!echoVal}" reRender="resultPanel" status="myStatus">
<apex:param name="firstParam" assignTo="{!enteredText1}" value="" />
<apex:param name="secondParam" assignTo="{!enteredText2}" value="" />
</apex:actionFunction>

The resulting JavaScript function created by the visualforce will be “echo“ because we have set that name for the “apex:actionFunction“.
Attribute “action“ will call the method specified on Apex class and “status“ will show the Ajax request status.
Below JavaScript method is used to call the generated method by “apex:actionFunction“.

function callActionMethod()
{
 var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;
 var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;
 /*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" */
 echo(txtVal1,txtVal2);
}

As you can see that we have called the method “echo” with two arguments, because in “apex:actionFunction” we have specified the parameters for the method.

Method 2:

In this method, instead of creating two temporary variable in Apex page and assigning it using attribute “assignTo” of we can directly get the value in Apex code by something like using

Apexpages.currentPage().getParameters().get('paramName');

So the resultant Apex code will be:

public with sharing class PassParameterActionFunction {
    public String val{get;set;}

    public void echoVal()
    {
     val = 'You have entered : 1 - '+Apexpages.currentPage().getParameters().get('firstParam')+' 2 -'+Apexpages.currentPage().getParameters().get('secondParam');
    }
}

Visualforce code:

<apex:page controller="PassParameterActionFunction">
<style type="text/css">
.pointer
{
    cursor:pointer;
    border:1px solid #ccc;
    padding:5px;
}
</style>
<apex:form id="frm">
<apex:outputPanel id="resultPanel">
<apex:actionStatus startText="requesting..." stopText="" id="myStatus" />
<br />
<b><apex:outputLabel value="{!val}" /></b>
</apex:outputPanel>
<br />
Enter Value 1 :
<apex:inputText id="txt1" />
<br />
Enter Value 2 :
<apex:inputText id="txt2" />
<br />
<br />
<br />
<span class="pointer" onclick="callActionMethod()"> Click Me !!! </span>

<apex:actionFunction name="echo" action="{!echoVal}" reRender="resultPanel" status="myStatus">
<apex:param name="firstParam"  value="" />
<apex:param name="secondParam"  value="" />
</apex:actionFunction>
</apex:form>
<script type="text/javascript">
function callActionMethod()
{
 var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;
 var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;
 /*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" */
 echo(txtVal1,txtVal2);
}
</script>

</apex:page>