All geek questions in one place

JSF reset form after submit

I have a little problem with my jsf form. I made an example of registering a 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 something and press the reset button, everything is reset (empty) again. however, when I simply type in the username, for example, and click submit my, error messages (required messages) appear, as it should be, and if I press the reset button now, nothing will be reset. everything remains the same.

I want my reset button to work in every state. How can i do this?

+6
source share
1 answer

The HTML element <input type="reset"> 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 original HTML source code. When you do render="@form" , as a result of which you basically update the HTML source code of the entire form, all these input fields now contain the presented values ​​in the HTML source code. As evidence that the reset button "works fine," try editing these presented values ​​again before pressing the reset button.

You have basically 2 options:

  • Do not use render="@form" . Only send these messages explicitly. For instance.

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

    It is just a lot of work to indicate all of them if you have a lot of them. If you use PrimeFaces, PrimeFaces Selectors may come to the rescue.

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

  • Refresh the page with the GET button.

     <h:button value="Reset" />
+4
source

Source: https://habr.com/ru/post/958411/

More articles:


All Articles