valueChangeListener, onchange and auto-submission of form using JSF

Question

For a simple html page like this:

<form action="success.html" >

        <input type="text" value="SomeValue" onchange="this.form.submit()"/>
        <input type="submit" value="Submit"/>

</form>

Any change of the value results in auto-submit of the form to navigate to success.html

Consider the following snippet in JSF 2.x:

<h:form >

        <h:panelGrid columns="3">

            <h:outputLabel value="Name: " />
            <h:inputText id="inputname" binding="#{zipAutoFill.inputName}" 
                                        required="true"/>
            <h:message for="inputname"/>

            <h:outputLabel value="Zip Code: " />
            <h:inputText id="inputzip" 
                         binding="#{zipAutoFill.inputZip}" 
                valueChangeListener="#{zipAutoFill.zipAutoFillListener}"
                                        onchange="this.form.submit()"/>
                                        <h:message for="inputzip"/>

            <h:outputLabel value="City: " />
            <h:inputText id="inputcity" binding="#{zipAutoFill.inputCity}" />
            <h:message for="inputcity"/>

            <h:outputLabel value="State: " />
            <h:inputText id="inputstate" binding="#{zipAutoFill.inputState}" />
            <h:message for="inputstate"/>

            <h:commandButton  id="submitbutton" value="Submit" action="page02"/>

        </h:panelGrid>


</h:form>

Based on the zip code filled in by the user(and so resulting in a change of value), the fields city and state will accordingly be populated.

However, after auto-submit, it doesn't navigate to page02.xhtml. What am I missing?

This question is ambiguous. Which problem exactly have you observed? 1) "Page URL doesn't change to that of page02.xhtml", or 2) "Page content doesn't change to that of page02.xhtml", or perhaps both? By the way, all those `binding` things are really scary, unless for some "extreme debugging" reasons. You'd better really remove them all and stop binding components to a managed bean. — BalusC, Mar 02 '15 at 07:22
@BalusC: It's not the URL change. I know very well that page URL does not change unless faces-redirect=true is added to the query string of the navigation URL. The question is why the contents of the second page are not shown in case of auto-submit in JSF whereas they happen with ordinary html. With onchange = "document.getElementById('submitbutton').click()"; it doesn't happen either. — Farhan stands with Palestine, Mar 02 '15 at 08:12
@BalusC: i am using the binding attribute as to understand the lifecycle by debugging. — Farhan stands with Palestine, Mar 02 '15 at 08:14
You'd better not include them in the question as that's misleading to starters. Instead, create a true http://stackoverflow.com/help/mcve — BalusC, Mar 02 '15 at 08:17

score 3 · Accepted Answer · edited May 23 '17 at 12:28

In the first example where you use simple HTML, the reason behind the navigation after submit is related to the action attribute, which is specified with the name of the page you want to send your data to it <form action="success.html" >, so your this.form.submit() will send the form data to the success.html and navigate to it.

To understand the reason why your second page is not shown in case of auto-submit using JSF you could take a look at the generated HTML. In your JSF example, and because you are using <h:commandButton>, the HTML generated will look something like this (for simplicity I assumed your form id is form and your current page is page01.xhtml):

<form id="form" name="form" method="post" action="/yourcontextpath/page01.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="form" value="form" />
    .....

    <input type="submit" name="form:submitbutton" value="Submit" />

</form>

Thus, you can notice that the action attribute of the generated HTML is set to your current page action="/yourcontextpath/page01.xhtml", which means that any call to the JavaScript submit() will send the form data to the current page which is in our case page01.xhtml (unlike the first example, where the form data was sent to another page success.html).

In a nutshell, You will not have the same behavoir, because the HTML code is not the same (comparing the first example, and the generated HTML) and the main difference is related to the page specified in the form's action attribute.

NB: If you submit using the <h:commandButton>, the result will be different, because JSF will use the outcome of the commandButton's action attribute to navigate to page02.xhtml as specified in <h:commandButton id="submitbutton" value="Submit" action="page02"/>

valueChangeListener, onchange and auto-submission of form using JSF

1 Answers1

See also: