JSF Tutorial - JSF Value Changed Event Example

We can handle value changed event for h:inputText or h:selectOneMenu.

To register the event handler listener, pass the name of the managed bean method in valueChangeListener attribute of UI Component.

Or implement ValueChangeListener interface and pass the implementation class name to valueChangeListener attribute of UI Component.

The following code shows how to register method from Managed Bean to valueChangeListener Method.

public void localeChanged(ValueChangeEvent e){
   //assign new value to country
   selectedCountry = e.getNewValue().toString(); 
}

<h:selectOneMenu value="#{userData.selectedCountry}"  onchange="submit()" 
   valueChangeListener="#{userData.localeChanged}" >
   <f:selectItems value="#{userData.countries}" />
</h:selectOneMenu>

The following code shows how to implement the ValueChangeListener.

public class LocaleChangeListener implements ValueChangeListener {
   @Override
   public void processValueChange(ValueChangeEvent event)
      throws AbortProcessingException {
     //access country bean directly
     UserData userData = (UserData) FacesContext.getCurrentInstance().
        getExternalContext().getSessionMap().get("userData"); 
     userData.setSelectedCountry(event.getNewValue().toString());
   }
}

And register with f:valueChangeListener tag.

<h:selectOneMenu value="#{userData.selectedCountry}" onchange="submit()">
   <f:valueChangeListener type="com.tutorialspoint.test.LocaleChangeListener"
      />
   <f:selectItems value="#{userData.countries}" />
</h:selectOneMenu>

Example

The following code is from demo.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
    <h:form>
        Selected country locale : 
        <h:inputText id="country" value="#{country.localeCode}" size="20" />
        Select a country {method binding}: 
        <h:selectOneMenu value="#{country.localeCode}" onchange="submit()"
          valueChangeListener="#{country.countryLocaleCodeChanged}">
             <f:selectItems value="#{country.countryInMap}" />
           </h:selectOneMenu>
        Select a country: 
        <h:selectOneMenu value="#{country.localeCode}" onchange="submit()">
          <f:valueChangeListener type="com.java2s.common.MyValueChangedListener" />
             <f:selectItems value="#{country.countryInMap}" />
           </h:selectOneMenu>      
    </h:form>
    </h:body>
</html>

The following code is from MyValueChangedListener.java.

package com.java2s.common;


import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ValueChangeEvent;
import javax.faces.event.ValueChangeListener;
 
public class MyValueChangedListener implements ValueChangeListener{

  @Override
  public void processValueChange(ValueChangeEvent event)
      throws AbortProcessingException {
    
    UserBean country = (UserBean) FacesContext.getCurrentInstance().
      getExternalContext().getSessionMap().get("country");

    country.setLocaleCode(event.getNewValue().toString());
    
  }
  
  
}

The following code is from UserBean.java.

package com.java2s.common;


import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ValueChangeEvent;
 
@ManagedBean(name="country")
@SessionScoped
public class UserBean implements Serializable{
  private static final long serialVersionUID = 1L;
  private static Map<String,String> countries;
  private String localeCode = "en"; //default value 
  static{
    countries = new LinkedHashMap<String,String>();
    countries.put("United Kingdom", "en"); //label, value
    countries.put("French", "fr");
    countries.put("German", "de");
  }
  public void countryLocaleCodeChanged(ValueChangeEvent e){
    localeCode = e.getNewValue().toString();
  }
  public Map<String,String> getCountryInMap() {
    return this.countries;
  }
  public String getLocaleCode() {
    return localeCode;
  }
  public void setLocaleCode(String localeCode) {
    this.localeCode = localeCode;
  }
}

Download Value_Changed_Event.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.

http://localhost:8080/simple-webapp/demo.xhtml