How to pass value of variables from visualforce to controller via javascript

Feedback

Have you ever stuck at situation where you actually want to send or pass the values from visualforce to controller via javascript,well it sound little tricky but it easy to pass the value to the controller via javascript so in this tutorial we will see how to achieve this i will divide this tutorial in several section so we can easily understand how to pass or send value from visualforce to controller using javascript,so lets see how to do that.You can also look at my other post.

http://ohotech.com/2015/03/introduction-to-objects-in-salesforce.html

In a brief summary we will going to use ‘apex action function’ as intermediator between javascript and controller to pass the value , see below picture for more details.

javascript to controller

so as you can see in the above picture the flow that’s how actually the value is been passed to the controller , now we will understand the process of doing this through code there are various way of transferring the value to controller so lets see in brief how to achieve that.

<apex:page controller="scriptcontroller" showHeader="false">
    <script type="text/javascript">


      function doSearch(idd)
        {
           //alert(idd);
            val(document.getElementById(idd).value);
            ss=document.getElementById(idd).value;
            alert(ss);
        }
        </script>

    <apex:form id="theform">
    <apex:pageBlock title="Javascript to controller example" id="theblock">

    <apex:actionFunction name="val" action="{!javascriptvalue}" reRender="thesection">
              <apex:param id="fs" name="firstName" value="" />
    </apex:actionFunction>

    <apex:pageBlockSection title="Javascript to controller example" id="thesection">
        <apex:pageBlockSectionItem id="thesectionitem" >
            First Name: <apex:inputText value="{!st}" onchange="doSearch('{!$Component.inpttxt}');" id="inpttxt" />
        </apex:pageBlockSectionItem>
        <apex:pageblockSectionItem >
            Full Name : <apex:inputtext value="{!fl}" />
        </apex:pageblockSectionItem>
    </apex:pageblocksection>
    </apex:pageBlock>
    </apex:form>
</apex:page>

The above will create two text fields as ‘first name’ and ‘full name’ now when ever i enter my first name ‘Sudhir’ then after on change event it called a javascript and that javascript will transfer the value to the controller in controller my value get changed and by using render attribute the new value get reflected back to my page,so lets divide code in smaller section to make it more understandable , so we will go as per the flow diagram which you have shown above so see the below code which is

<apex:pageBlockSectionItem id="thesectionitem" >
First Name: <apex:inputText value="{!st}" onchange="doSearch('{!$Component.inpttxt}');" id="inpttxt" />
</apex:pageBlockSectionItem>

In the above code when ever you put any text in the field then during the on change event from null to string that will call the javascript function ‘doSearch‘ and in this do search we are passing the ‘ID’ of the input text field using ‘$Component‘. Now let see the javascript code.

   function doSearch(idd)
        {
           //alert(idd);
            val(document.getElementById(idd).value);
            ss=document.getElementById(idd).value;
            alert(ss);
        }

In the above we would get the ID in the variable ‘idd‘ and then using javascript we would get the value and then pass the value to the apexactionfunction by enclosing the value in the val(), where val is the name of apexactionfunction , see the below code of the apexactionfunction.

<apex:actionFunction name="val" action="{!javascriptvalue}" reRender="thesection">
    <apex:param id="fs" name="firstName" value="" />
</apex:actionFunction>

Now as you can see in the above code that apexactionfunction then call to the controller method javascriptvalue , now lets take a look at the apex code.

public class scriptcontroller {

    public PageReference javascriptvalue() {
        String firstName = Apexpages.currentPage().getParameters().get('firstname');
        System.debug(firstname);
        fl=firstname+ ' ' + 'Dudeja';
        System.debug(fl);
        return null;
    }

 public String st { get; set; }
 public String fl { get; set; }
}

As you can see in the above code the value get changed and get reflected to the visualforce page if you want to view the demo you can do it by clicking at the below button.

I hope you all like my this post if you have any query you can leave the comment below in the comment section and don’t forget to subscribe to my blog and you can also look at my other post.

Related Articles :

Speak Your Mind

*