Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
869 views
in Technique[技术] by (71.8m points)

jsf 2 - JSF resetting form after submit

i have a small problem with my jsf form. i made an example registration form with a submit button and a reset button:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core" 
  xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>Register</title>
</h:head>

<h:body>

    <ui:composition template="/templates/master.xhtml" >

        <ui:define name="content">

            <center>
                <h:outputText value="New User Registration" />
            </center>

            <h:form>

                <h:panelGrid columns="3">

                    <h:outputText value="Username:" />
                    <h:inputText id="username" value="#{registerService.userName}" required="true" requiredMessage="Please Enter Username!" />
                    <h:message for="username" style="color:red" />

                    <h:outputText value="Password:" />
                    <h:inputSecret id="password" value="#{registerService.password}" required="true" requiredMessage="Please Enter Password!" />
                    <h:message for="password" style="color:red" />  

                    <h:outputText value="Confirm Password:" />
                    <h:inputSecret id="confirmPassword" value="#{registerService.confirmPassword}" required="true" requiredMessage="Please Confirm Password!" />
                    <h:message for="confirmPassword" style="color:red" />   

                    <h:outputText value="Lastname:" />
                    <h:inputText id="lastname" value="#{registerService.lastName}" required="true" requiredMessage="Please Enter Lastname!" />
                    <h:message for="lastname" style="color:red" />

                    <h:outputText value="Firstname:" />
                    <h:inputText id="firstname" value="#{registerService.firstName}" required="true" requiredMessage="Please Enter Firstname!" />
                    <h:message for="firstname" style="color:red" />

                    <h:outputText value="Date of Birth" />
                    <h:panelGrid columns="3">

                        <h:selectOneMenu value="#{registerService.dayOfBirth}">
                            <f:selectItems value="#{registerService.days}" />
                        </h:selectOneMenu>

                        <h:selectOneMenu value="#{registerService.monthOfBirth}">
                            <f:selectItems value="#{registerService.months}" />
                        </h:selectOneMenu>

                        <h:selectOneMenu value="#{registerService.yearOfBirth}">
                            <f:selectItems value="#{registerService.years}" />
                        </h:selectOneMenu>

                    </h:panelGrid>
                    <h:outputText value="" />

                    <h:outputText value="E-Mail:" />
                    <h:inputText id="email" value="#{registerService.eMail}" required="true" requiredMessage="Please Enter E-Mail!" />
                    <h:message for="email" style="color:red" /> 

                    <h:outputText value="Confirm E-Mail:" />
                    <h:inputText id="confirmEmail" value="#{registerService.confirmEMail}" required="true" requiredMessage="Please Confirm E-Mail!" />
                    <h:message for="confirmEmail" style="color:red" />  

                    <h:outputText value="Country:" />
                    <h:inputText id="country" value="#{registerService.country}" required="true" requiredMessage="Please Enter Country!" />
                    <h:message for="country" style="color:red" />

                    <h:outputText value="Region:" />
                    <h:inputText id="region" value="#{registerService.region}" required="true" requiredMessage="Please Enter Region!" />
                    <h:message for="region" style="color:red" />

                    <h:outputText value="Town:" />
                    <h:inputText id="town" value="#{registerService.town}" required="true" requiredMessage="Please Enter Town!" />
                    <h:message for="town" style="color:red" />

                    <h:outputText value="ZIP-Code:" />
                    <h:inputText id="zipCode" value="#{registerService.zipCode}" required="true" requiredMessage="Please Enter ZIP-Code!" />
                    <h:message for="zipCode" style="color:red" />   

                </h:panelGrid>

                <h:commandButton type="submit" value="Submit" action="#{registerService.addUser}" >
                    <f:ajax execute="@form" render="@form" />
                </h:commandButton>            
                <h:commandButton type="reset" value="Reset" />

            </h:form>

        </ui:define>

    </ui:composition>

</h:body>

When i type in something and press the reset button everything is reset (to empty) again. however when i just type in the username for example and press submit my error messages are appearing (required messages) as it should be and if i now press the reset button nothing is reset. everything stays the same.

i want my reset button to work in every state. how can i do that?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The HTML <input type="reset"> element as generated by <h:commandButton type="reset"> does not clear the input values of the form. Instead, it resets the input values of the form to their initial values as they are in the initially obtained HTML source code. When you do a render="@form", whereby you basically ajax-update the HTML source code of the entire form, all those input fields will now contain the submitted values in the HTML source code. As evidence that the reset button "works fine", try editing those submitted values once again before pressing the reset button.

You've basically 2 options:

  1. Don't use render="@form". Render only explicitly those messages. E.g.

    <h:message id="m_username" for="username" ... />
    <h:message id="m_password" for="password" ... />
    ...
    <f:ajax ... render="m_username m_password ..." />
    

    It's only a hell lot of work to specify them all if you have many of them. If you're using PrimeFaces, PrimeFaces Selectors may come into rescue.

    <h:message for="username" styleClass="message" />
    <h:message for="password" styleClass="message" />
    ...
    <p:ajax ... update="@(.message)" />
    

  2. Refresh the page by a GET button.

    <h:button value="Reset" />
    

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...