Passing multiple Parameters in ActionFunction in Visualforce

Example and Source code of multiple Parameters Parameter in ActionFunction in Visualforce – Salesforce

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.

Passing Parameter in ActionFunction in Visualforce
Passing Parameter in ActionFunction in Visualforce

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>

Related posts

19 thoughts on “Passing multiple Parameters in ActionFunction in Visualforce”

  1. superb Jitendra…..I was looking for it for a long time …….thnx a lot.You are doing a great job man.I cannot even explain how much I have learnt from your salesforce blog only.Keep it up!

      1. Hi jitendra,

        Will you please tell me standard and custom object for financial and e-commerce CRM? I mean if you could suggest me with some custom object example.

        1. Hi Find image in this comment. It would give u idea about the custom objects, field and there relationship.
          Regards,
          Jitendra

  2. I am having a scenario like this:

    I am having an list of records, which I will be iterating over in

    If I use this.value, value is being passed correctly.
    If I use, InrCls.Score__c, old value is being passed. Why?

  3. Thank you very much for this easy to follow example! I was going crazy for a full day trying to get a similar solution to work. This was the missing piece!

  4. When I tried the same thing with either <apex:commandButton or <input type="submit", this is not working. Is that the reason you are calling javascript method from onclick event on a span element.
    Can you please confirm this?

  5. Thanks

    Jitendra for this, i have a question ,i want to use html codes like [ ] in my vf page and then wants to pass value to my controller is it possible ,because some time design issues comes in

    i want to be very clear in my vf page i want to use html codes .
    regards

    Abhishek

    1. Hi abhishek.. Its not possible to use HTML element available to controller. U must need vf form element. For design related issue … You can always disable visual force style while declaring page..

  6. Extremely Valuable tutorial, Thank you for posting this!!
    quick question:

    is it possible instead of calling: callActionMethod()

    to call directly the echo method (in order to reduce the extra step of creating javascript in the VF page)

    Click Me !!!
    ?
    I have give it a go but it doesnt work.
    will be really cool to find out if this is possible

    Thanks!

  7. @Jitendra : Thanks a lot for this blog. Loved that Javascript call workaround.

    Could you please try using apex:inputfield tag instead of inutText?

    Whenever I use inputfield wrapped in and it just refuses to call javascript function. DOnt know whats wrong with that.
    If I don’t use , inputfield wont display its label from the object.

    I had to literally spend 3 days to debug it out and remove pageblock to get it working.

  8. I get the following error after running a version of your code… Any ideas on what could be causing this?
    “Return type of an Apex action method must be a PageReference. Found: core.apexpages.el.adapters.ApexObjectValueELAdapter “

    1. Never mind. I had to update my function to “return null;” The code works great by the way, thank you so much @Jitendra for sharing!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.