actionFunction tag in visualforce

actionFunction

What is <apex:actionFunction> tag? This tag defines  JavaScript functions to be called from JavaScript code.  By using this tag you can call controllers methods from java script code using an AJAX request .

This component must be a child of <apex:form> tag. And we cannot place this tag inside an iteration tag like <apex:pageBlockTable> & <apex:repet> now. Earlier we were able to do this.But with api version 23 we cannot place <apex:actionFunction> inside iteration tags

Here I am providing an example, How to use <apex:actionFunction> tag is visualforce. I have created simple Lead form to enter lead details from custom page. Last name, Company & email are mandatory fields in below page. If any miss those required fields, I am displaying  alert by Javascript and i am calling method from java script to save the record. See below code to understand, how <apex:actionFunction> will work.

Visualforce page code:

<apex:page controller="InsertLeadController" showHeader="false">

<script type="text/javascript">
function validate()
    {
        if(document.getElementById('{!$Component.LF.LDB.Lname}').value == '' || document.getElementById('{!$Component.LF.LDB.comp}').value == '')
        {
            alert("LAST NMAE & Company are requird fields");
        }
        
        else
        {
            <strong><span style="color: #ff0000;" data-mce-style="color: #ff0000;">CallsubmitLead();</span></strong>
            alert("Account has been inserted");
        }
    }
    
 </script>
    
 <apex:form id="LF">
 <strong><span style="color: #ff0000;" data-mce-style="color: #ff0000;"><apex:actionFunction action="{!submitLead}" name="CallsubmitLead" reRender="LDB"/></span></strong>  
 <apex:pageBlock title="Lead Form - Enter lead details" id="LDB"> 
  <table>
  <tr>
  <td><apex:outputText value="First Name"/></td>
  <td><apex:inputText value="{!firstName}"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Last Name"/></td>
  <td><apex:inputText value="{!lastName}" id="Lname"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Comapany"/></td>
  <td><apex:inputText value="{!comapany}" id="comp"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Mobile"/></td>
  <td><apex:inputText value="{!mobile}"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Lead Status"/></td>
  <td><apex:selectList value="{!statusOptions}">
  <apex:selectOptions value="{!items}"/>
  </apex:selectList></td>
  </tr>
  </table>  
  <apex:commandButton value="Save" <strong><span style="color: #ff0000;" data-mce-style="color: #ff0000;">onclick="validate();</span></strong>"/> 
 </apex:pageBlock>  
  </apex:form>
</apex:page>

Controller Code:

public class InsertLeadController {

	public String statusOptions { get; set; }
	public String comapany { get; set; }
	public String mobile { get; set; }
	public String firstName{get;set;}
	public String lastName{get;set;}
	public Lead l = new Lead();

	public List<SelectOption> getItems() {
		List<SelectOption> options = new List<SelectOption>();
		options.add(new SelectOption('Open - Not Contacted','Open - Not Contacted'));
		options.add(new SelectOption('Working - Contacted','Working - Contacted'));
		options.add(new SelectOption('Closed - Converted','Closed - Converted'));
		options.add(new SelectOption('Closed - Not Converted','Closed - Not Converted'));
		return options;
	}

	public PageReference submitLead() {
		l.FirstName=firstName;
		l.LastName=lastName;
		l.Company=comapany;
		l.MobilePhone=mobile;
		l.Status=statusOptions;
		insert l;
		return null;
	}
}

In this example, I am calling submitLead methods from javascript.