Home > Blog > Passing value of variables from visualforce to controller via javascript

Passing value of variables from visualforce to controller via javascript

Hey guys, today we will have a discussion on How to Pass value of variables from visualforce to controller via javascript.So, have you ever stuck in a situation when you want to pass value of variables from your visualforce page to your controller ? Sounds tricky !! Well this can be easily achieved via javascript. So to understand this easily , I have explained this in below defined steps. I will explain it with an example. Here, apex action function will act as a mediator between our Visualforce and javascript function. We will take an example for Account Name and Country. With the help of Vf page input text box we will enter value and on button click it will be updated, and you can see that value in your Controller method with the help of Debug.

1. Create a VF page


//add necessary Cdn files if required.
/************************** javascript function to get Data from Visualforce input textbox ***********************************/
function testinputData(){
	var str = document.getElementById('testData').value;
	var str1 = document.getElementById('testData2').value;
	alert(str);
	passToController(str,str1);
}
/************************** Output Panel to Show Data ***********************************/
{!acc.Name}  {!acc.Country__c}
/******************Action Function to Pass Value to Controller ***********/

So here We will input values for Name and Country on Vf page, then on button click testInputData() , a Javascript Function will be called. In this Function, two variables (Str, Str1) will get values from the Vf page with the help of ther Id’s. After getting those Values will be paased into a passToController apex function. passToController apex function will perform action on Controller method- textInputX and apex:param will help to assign the values to the string or list in the controller.

2. Create Apex Class


/**************************Apex Class ***********************/
public class javascriptController {
	public List lstAccount {get;set;}
	public List newLstAccount {get;set;}
	public string value { get; set;}
	public string value1 { get; set;}
	public javascriptController(){
		paramValue();
	}
	public void paramValue(){
		lstAccount = [select id,Country__c, name from account limit 1];
		newLstAccount = [select id,Country__c, name from account limit 1];
	}
	public void testinputX(){
		value = apexpages.currentPage().getParameters().get('inpval');
		value1 = apexpages.currentPage().getParameters().get('inpval1');
		system.debug(value);
		system.debug(value1);
		update newLstAccount;
	}
}

Now after the values are assigned using param to the controller method, In the testinputX method we have two str variables value and value 1 which will help us to get the value using param name from VFpage in the controller. You can debug those values and Check. If you want to update the account name or country you can run update method on the account list and check the results. As you can see in the above code the value get changed and get reflected to the visualforce page .

I hope you all like my this post if you have any query you can leave the comment below in the comment section.

Thank You

Enquire Now
X

lets get over a cup of coffee and discuss!