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.

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>

Posted

in

,

by


Related Posts

Comments

19 responses to “Passing multiple Parameters in ActionFunction in Visualforce”

  1. Rohan Avatar
    Rohan

    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. JitendraZaa Avatar
      JitendraZaa

      Thanks Rohan.

      1. Prashant Avatar
        Prashant

        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. JitendraZaa Avatar
          JitendraZaa

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

  2. Narayana0005 Avatar
    Narayana0005

    HI 
    COULD YOU PLEASE EXPLAIN SALES FORCE ARCHITECTURE .

  3. Sekambika10 Avatar
    Sekambika10

    thank you so much its really helpful thank you

  4. vivek Avatar
    vivek

    grt blog thanks

  5. suresh kalluri Avatar
    suresh kalluri

    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?

  6. SteveWestfall Avatar
    SteveWestfall

    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!

    1. JitendraZaa Avatar
      JitendraZaa

      I am glad that this post is useful to you !!!

  7. zuke Avatar
    zuke

    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?

  8. Abhishek Avatar
    Abhishek

    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. JitendraZaa Avatar
      JitendraZaa

      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..

  9. Fabian Manzano Avatar
    Fabian Manzano

    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!

    1. Fabian Manzano Avatar
      Fabian Manzano

      while tetsing i notice also that if I used

      doesnt work, is there any specific reason?
      Thanks

  10. Anji Avatar
    Anji

    Thank you.. Its very clear now

  11. Shabbar Lokhandwala Avatar
    Shabbar Lokhandwala

    @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.

  12. Ken Goolsby Avatar
    Ken Goolsby

    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. Ken Goolsby Avatar
      Ken Goolsby

      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 to Ken GoolsbyCancel reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading