Menu
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?
937
Welcome to a quick beginner’s tutorial on how to reset an HTML form after submission. So you are working on a form that needs to clear after the user submits it? There are 2 mechanisms in HTML and Javascript to take note of when it comes to resetting forms: Use document.getElementById ("FORM").reset () in Javascript to reset the form.
Definition and Usage. The reset() method resets the values of all elements in a form (same as clicking the Reset button).
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.
Use document.getElementById ("FORM").reset () in Javascript to reset the form. Add an autocomplete="off" property to the HTML form to prevent possible auto-filling after the form reset.
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:
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)" />
Refresh the page by a GET button.
<h:button value="Reset" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
