h:selectOneMenu ValueChangeEvent firing on h:commandButton onclick?

Question

I have the following Dropdown list, which has a Event associated with it, when user select a value from this dropdown the rest of the dropdown lists along with a table are filled accordingly:

 <Td>
 <h:selectOneMenu id="combocarList" 
     value="#{customerBean.selectedcar}"
     styleClass="comboStyle"
     valueChangeListener="#{customerBean.loadothercombos}"
     onchange="document.forms[0].submit()"
 >
     <f:selectItem
    itemLabel="-----------Select--------------"
    itemValue="None" />
      <f:selectItems value="#{customerBean.carsList}" />
   </h:selectOneMenu>
  </Td>

i also have a h:commandButton as below:

<TD>
    <h:commandButton id="btnCheckVals" value="Submit"
    onclick="return checkSelectedVal(this);"
    ></h:commandButton>
 </TD>

When i click the "Submit" button, the Event associated with above dropdown is called and the javascript function is never called! is the the expected behaviour ? and if so how can i make it so the javascript function is called before the event is fired allowing to check if user has selected values from dropdowns.

score 1 · Accepted Answer · edited May 23 '17 at 12:30

I'm not sure if you have read my answer on one of your previous questions. You never gave any feedback and you accepted another answer. I've already warned that this approach is a hacky way.

You're basically abusing the valueChangeListener here. Its sole purpose is to provide a point to have access to both the old and new value at the same moment so that you can if necessary take specific business actions, such as logging the both values.

Using it with the sole purpose to "automagically" populate another component/element based on only the new value (you're totally not interested in the old value) is a hack. If you're already on JSF 2.0, I really strongly recommend the <f:ajax> approach as mentioned in the linked answer.

Back to your concrete problem, you need to understand that the valueChangeListener will always be fired whenever the submitted value differs from the initial model value. This is irrespective of all that JavaScript assistance. The onchange="submit()" does not specifically trigger the listener, it just submits the entire form to the server. It just happens to take place when the enduser changes the dropdown, so a change is guaranteed, so the listener will be invoked in the server side.

Your problem suggests that you haven't inside the valueChangeListener set the model value with the submitted value and that you're calling FacesContext#renderResponse(). This approach is almost the same as demonstrated in the 1st way of my linked answer, expect of the line which sets the submitted value as model value. Because you didn't set it, any subsequent form submits will thus always fire the listener (because the submitted value is different from the model value!). Also, because the FacesContext#responseComplete() skips the invoke action phase, the action method is never called.

Now, reread my linked answer once again how to implement it properly.

h:selectOneMenu ValueChangeEvent firing on h:commandButton onclick?

1 Answers1