Why do I have to click my submit button twice?

Question

I have quite a huge form for data capture. The main problem is that I'll always have to click on the submit button twice in order for the form to be submitted. The first time I press it, it just refreshes and does nothing. Why is this so? Inside my form, there is plenty of input text.

There are also some dynamic select menus, in which its list of items changes depending on the selected item in a different menu. My suspicion is is that the problem lies here as there are valueChangeListener, onchange="submit()" and immediate="true", which might have some side effects that I don't quite understand. I'm not getting any error messages though. Anyone faced any such problem before?

<h:commandButton type="submit" value="Add Job Profile" action="{formBean.commitData}"/>

    public void commitData() {
    QueryRunner run = new QueryRunner(ds);
    String insertSql = "sql command here";

    try {
        int numberOfCommits = run.update(insertSql);
        if (numberOfCommits > 0) {
            JOptionPane jop = new JOptionPane("Inserted " + numberOfCommits +"record");
            JDialog dialog = jop.createDialog("Upload complete");
            dialog.setAlwaysOnTop(true);
            dialog.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
            dialog.setVisible(true);
        } else {
            JOptionPane jop = new JOptionPane("Upload  failed.  Please try again." );
            JDialog dialog = jop.createDialog("Upload failed");
            dialog.setAlwaysOnTop(true);
            dialog.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
            dialog.setVisible(true);

        }

    } catch (SQLException sqle) {
        sqle.printStackTrace();
    }
}

I don't even get the upload failed message on first click. On second click, upload succeeds.

EDIT: Yup, it's the dynamic select menus. I'm able to submit on first click if i remove these menus. Still, how do I resolve this?

<h:outputLabel value="Family: " />
<h:selectOneMenu id="selectFamily"
                 value = "#{formBean.selectedFamily}"
                 valueChangeListener="#{menuBean.changeFamily}"
                 onchange="submit()"
                 immediate = "true" >
<f:selectItems id="familyNames" value="#{menuBean.familyNames}" />
</h:selectOneMenu>


<h:outputLabel value="Function: " />
<h:selectOneMenu id="selectFunction"
                 value="#{formBean.selectedFunction}"
                 immediate="true" >

<f:selectItems id="functionNames" 
               value="#{menuBean.functions}" />
</h:selectOneMenu>

    // listen for family change and render relevant function
       public void changeFamily(ValueChangeEvent event) {
          FacesContext context = FacesContext.getCurrentInstance();
          String value = (String) event.getNewValue();
          switchFunctions(value);
          context.renderResponse();
        }

Answer 1

Apparently the valueChangeListener got triggered on submit as well. The line context.renderResponse() will cause the invoke application phase being completely skipped. The valueChangeListener will be triggered when the initial menu value wasn't the same as the submitted value. Verify this.

Anyway, having synchronous dropdown menus like that in combination with validation on other input fields in the same form is really a pita. So to make a long story short, here's just a link: populate child menus (in JSF).