How To Learn Get Field Values From Visualforce Page To Apex Class Controller Without Losing Your Mind

Here I am explaining Get Field Values From Visualforce Page To Apex Class Controller. Below is the sample code snippet, I have created one controller class and one visual force page associated with it. 

Visual force page has to Submit button. 

Once a user clicks on the button, I am sending email using apex code. 

Check below sample code:

Step 1. Create Apex Controller with name passparamFromVFtoController

Public with sharing class passparamFromVFtoController {
  Public string myInputQueryString{get;set;}
  Public string myoutputString{get;set;}
   
  Public void myInputQuery(){
   System.debug("Inserted string is :- "+ myInputQueryString);
   myoutputString = myInputQueryString ;
   System.debug("Output string is :- "+ myoutputString);
  }

}

Step 2. Create Visualforce Page with name passparamFromVFtoController

<apex:page controller="passparamFromVFtoController" sidebar="false" showHeader="false">
  <!-- Pass parameters from visualforce page to controller -->
  <apex:form >
    <apex:pageblock >
     Input your question=> <apex:inputText value="{!myInputQueryString}"/>
     <apex:commandButton value="Submit" reRender="DisplayInputQueryID" action="{!myInputQuery}"/>
    </apex:pageblock>
     <apex:pageblock >
       <b>Output : </b><apex:outputText value="{!myoutputString}" id="DisplayInputQueryID"/>
     </apex:pageblock>
    </apex:form>
</apex:page>

Output :

You can click on Preview button which is on Visualforce page 
OR 
You can Go to the URL and type (Change the salesforceinstancename with your salesforce org URL).


Go to : https://salesforceinstancename/apex/passparamFromVFtoController.

There is another way: JavaScript Remoting

---

JavaScript Remoting is a framework or tool that front end developers can use to make an AJAX request from a Visual force page directly to an Apex controller. JavaScript remoting allows you to run asynchronous action by separating the page from the controller and to perform tasks on the page without having reloading the entire page.
JavaScript Remoting is the well-organized and competent way of calling the controller in an asynchronous manner and passing data in from the page, because you are sure that you are passing only that data which you need each time that you make a call.

Step 1: Create an Apex controller called AccountRemoterClass

global with sharing class AccountRemoterClass {

    public String accountName { get; set; }

    public static Account account { get; set; }

    public AccountRemoterClass () { } // empty constructor

    

    @RemoteAction

    global static Account getAccount(String accountName) {

        account = [SELECT Id, Name, Phone, Type, NumberOfDepartments__c 

                   FROM Account WHERE Name = :accountName];

        return account;

    }

}

Step 2: Create a Visualforce page that looks like this:

<apex:page controller="AccountRemoterClass">

    <script type="text/javascript">

    function getRemoteAccount() {

        var accountName = document.getElementById('accountSearch').value;

        Visualforce.remoting.Manager.invokeAction(

            '{!$RemoteAction.AccountRemoterClass.getAccount}',

            accountName, 

            function(result, event){

                if (event.status) {

                    // Below line fetch Visualforce elements and DOM IDs for HTML

                    document.getElementById('remoteAcctId').innerHTML = result.Id

                    document.getElementById(

                        "{!$Component.block.blockSection.secondItem.acctNumEmployees}"

                        ).innerHTML = result.NumberOfEmployees;

                } else if (event.type === 'exception') {

                    document.getElementById("responseErrors").innerHTML = 

                        event.message + "<br/>\n<pre>" + event.where + "</pre>";

                } else {

                    document.getElementById("responseErrors").innerHTML = event.message;

                }

            }, 

            {escape: true}

        );

    }

    </script>

    <input id="accountSearch" type="text"/>

    <button onclick="getRemoteAccount()">Get An Account</button>

    <div id="responseErrors"></div>

    <apex:pageBlock id="block">

        <apex:pageBlockSection id="blockSection" columns="2">

            <apex:pageBlockSectionItem id="firstItem">

                <span id="remoteAcctId"/>

            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem id="secondItem">

                <apex:outputText id="acctNumEmployees"/>

            </apex:pageBlockSectionItem>

        </apex:pageBlockSection>

    </apex:pageBlock>

</apex:page>

Below are the JavaScript Remoting Limits:

---

Remote call`s default response time is 30 seconds. If remote call taking longer time than 30 seconds then you will get a time out exception.
If your request requires more time to complete the transaction, then configure a longer timeout. You can setup it to 120 seconds. 
Most of the interviewer asks the question, what is the maximum response size of your remote call ?
Answer is : maximum 15 MB.

Enjoy! If you have any questions, comments etc. please feel free to let me know. As always, please feel free to get in touch me as I would be more than happy to assist you with any of your Salesforce development needs.

Next post: Schedulable Batch Apex In 3 Easy steps In Salesforce