SelectOneMenu and ValueChangeListener

Question

Hi All,
I am a new user of JSF components. I've got a problem about getting the selected value from the selectedOneMenu component. I have 3 selectOneMenu box and each has valueChangeListener.
I wanna get first selected id and get the second value according to the first selected id and so on.
The frist value change listener submit and get the selected value.But when the second value change listener submit the value, the first selectOneMenu also submit the value, so the previous value is lost and return null cause of no selection in the first box.
I 've separate these component to three separate forms . But when one of the ValueChangeListener is execute, the others also execute.
So , How can I pass this problem..
Here is my coding...
<h:form id="form1">
                    <h:panelGrid columns="3">
                    <h:column><h:outputLabel value="Category L1 : " /> </h:column>
               <h:column>
                         <h:selectOneMenu id="selectValue"
                                                  onchange="this.form.submit();"
                                             immediate="true"
                                             value="#{categoryBean.selectValue}"
                                             valueChangeListener="#{categoryBean.item1Change}">
                                   <f:selectItems value="#{categoryBean.menuItem1}"/>
                         </h:selectOneMenu>
                    </h:column>     
                    <h:column></h:column>               
                    <h:column><h:outputLabel value="Description : " /></h:column>
                    <h:column><h:outputText value="test" /></h:column>
                    <h:column><h:commandButton action="" value="Add New" /></h:column>
                    </h:panelGrid>
                    <h:inputHidden value="#{categoryBean.tempValue}" />
               </h:form>
               <h:form id="form2">
                    <h:panelGrid columns="3">
                    <h:column><h:outputLabel value="Category L2 : " /> </h:column>
               <h:column>
                         <h:selectOneMenu id="selectValue2"
                                                  onchange="this.form.submit();"
                                                  immediate="true"
                                                  value="#{categoryBean.selectValue2}"
                                                  valueChangeListener="#{categoryBean.item2Change}">
                                   <f:selectItems value="#{categoryBean.menuItem2}"/>
                         </h:selectOneMenu>
                    </h:column>     
                    <h:column></h:column>               
                    <h:column><h:outputLabel value="Description : " /></h:column>
                    <h:column><h:outputText value="test" /></h:column>
                    <h:column><h:commandButton action="" value="Add New" /></h:column>     
                    </h:panelGrid>
               </h:form>     
               <h:form id="form3">
                    <h:panelGrid columns="3">
                    <h:column><h:outputLabel value="Category L3 : " /> </h:column>
               <h:column>
                         <h:selectOneMenu id="selectValue3"
                                                  onchange="this.form.submit();"
                                             immediate="true"
                                                  value="#{categoryBean.selectValue3}"
                                                  valueChangeListener="#{categoryBean.item3Change}">
                                   <f:selectItems value="#{categoryBean.menuItem3}"/>
                         </h:selectOneMenu>
                    </h:column>     
                    <h:column></h:column>               
                    <h:column><h:outputLabel value="Description : " /></h:column>
                    <h:column><h:outputText value="test" /></h:column>
                    <h:column><h:commandButton action="" value="Add New" /></h:column>
                    </h:panelGrid>     
               </h:form>          
     public void item1Change(ValueChangeEvent event) {
          Utils.log(getFacesContext(),"Win b kwa...1.........");
          PhaseId phaseId = event.getPhaseId();
          String oldValue = (String) event.getOldValue();
          String newValue = (String) event.getNewValue();
          this.tempValue = newValue;
          if (phaseId.equals(PhaseId.ANY_PHASE))
               event.setPhaseId(PhaseId.UPDATE_MODEL_VALUES);
               event.queue();
          else if (phaseId.equals(PhaseId.UPDATE_MODEL_VALUES))
          Utils.log(getFacesContext(),"New Value is......"+newValue );
          if(newValue == null){
               logger.info("Next time win tar.....");
          else{
               this.setSelectValue(newValue);
          Utils.log(getFacesContext(), "In L1 : Selected Value is..."+this.getSelectValue());
          this.menuItem2 = this.getCategoryList(this.getSelectValue());
          FacesContext context = FacesContext.getCurrentInstance();
          context.renderResponse();
please help me.. thanks in advance...

Answer 1

There's a few things...
First, and foremost, is that you have two forms on the page. This is a bad idea with JSF. It tends to mess things up (although, some people may have gotten it to work right). You might want to find a way to have only one h:form tag per page. That shouldn't actually be too hard.
Next, it looks like you set up your selectOneMenu tags properly. You have the valueChangeListener, immediate=true and a form submit onchange. Good!
However, the valueChangeListener implementation is different than what I usually see. You're queueing up the event to fire in UPDATE_MODELS phase... This is strange. This will probably undo the fact that you put immediate="true" on your component in the first place.
My suggestion is not to manipulate the phases this way, for your particular problem. Instead, get the new value and set the selected value (without retrieving the phaseId). Then call facesContext.renderResponse() at the end of your valueChangeListener implementation. Something like this:
public void item1Change(ValueChangeEvent event) {
    String newValue = (String) event.getNewValue();
    if(newValue == null){
        logger.info("Next time win tar.....");
    else{
         this.setSelectValue(newValue);
    Utils.log(getFacesContext(), "In L1 : Selected Value is..."+this.getSelectValue());
    //What's this?
    this.menuItem2 = this.getCategoryList(this.getSelectValue());
    FacesContext context = FacesContext.getCurrentInstance();
    context.renderResponse();
}Start there. There may be a few more problems.
CowKing