How to pass html input field values from visualforce page to apex controller in Salesforce

     The following example code will explain about how to pass html input field values from visualforce page to apex controller in Salesforce.

Apex Class:

1. public class SubmitFormController
2. {
3.     public string username{get;set;}
4.     public string password{get;set;}
6.     public void submitForm()
7.     {
8.       System.debug('## User name: '+username);  
9.       System.debug('## Password: '+password);  
10.     }
11. }

Visualforce Page:

1. <apex:page controller="SubmitFormController">
2.     <script type="text/javascript">
3.     function submitData() {
4.         var uname = document.getElementById('username').value;
5.         var password = document.getElementById('password').value;
6.         submitActionFunction(uname, password);
7.     }
8.     </script>
9.     <apex:form>
10.         <apex:actionFunction name="submitActionFunction" action="{!submitForm}"  reRender="actionFun">
11.             <apex:param name="uname" assignTo="{!username}" value="" />
12.             <apex:param name="pwd" assignTo="{!password}" value="" />
13.         </apex:actionFunction>
14.         <center>
15.             Username: <input type="text" id="username" value=""/> <br/> <br/>
16.             Password: <input type="text" id="password" value=""/> <br/> <br/>
17.             <input type="button" onclick="submitData();" value="Submit From HTML Button"/> &nbsp; &nbsp;
18.             <apex:commandButton value="Submit From Apex Button" onclick="submitData();" reRender="sapex"/>
19.         </center>
20.     </apex:form>  
21. </apex:page>

What is done on the VF Page?

1. Wrote Javascript function named as submitForm. Input field values are accessed using DOM element and called the actionFunction (submitActionFunction)

2. The above javascript function has been called from button onclick event. actionFunction tag will call an apex method and passed html input field values as parameter.

3. Here i am sending two input text fields, so two apex:param tags are used and assigned the values to the corresponding apex controller variable using assignTo attribute.