CODEWITHSUNDEEP
htmljsfjsf-2.2valuechangelistener
Farhan stands with Palestine
Farhan stands with Palestine

Reputation: 14126

valueChangeListener, onchange and auto-submission of form using JSF

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?

Upvotes: 0

Views: 2939

Answers (1)

Tarik
Tarik

Reputation: 5021

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"/>

See also:

Upvotes: 3

Related Questions