PrimeFaces clear the text fields on submitting the form

Question

I have a code which is for a Registration Form. There are some fields and a Submit button of type <p:commandButton>.Now when I submit the button it shows a datatable under the form which renders the values of the input filed. I want to clear the input text fields after the form submit. But the values remains. How can I clear the values of the text fields of the form?

<p:panel header="Registration Form" closable="true" closeSpeed="100" toggleable="true" toggleSpeed="100" toggleOrientation="vertical">
            <h:panelGrid columns="2" cellpadding="5">
                <p:outputLabel value="*First Name"/>
                <p:inputText id="firstname" value="#{registrationDetails.firstName}" required="true" label="First Name" requiredMessage="First Name required!"/>

                <p:outputLabel value="*Last Name"/>
                <p:inputText id="lastname" value="#{registrationDetails.lastName}" required="true" label="Last Name" requiredMessage="Last Name required!"/>

                <p:outputLabel value="Location"/>
                <p:selectOneMenu id="location" value="#{registrationDetails.location}">
                    <f:selectItem itemLabel="Select Location" itemValue=""/>
                    <f:selectItems value="#{registrationDetails.locations}"/>
                </p:selectOneMenu>

                <p:outputLabel id="email" value="*Email"/>
                <p:inputText value="#{registrationDetails.email}" required="true" label="Email" requiredMessage="Email address required!"/>

                <p:outputLabel value="*Contact Number"/>
                <p:inputText id="contactNumber" value="#{registrationDetails.contactNumber}" autocomplete="false" maxlength="10" required="true" label="Contact Number" requiredMessage="Contact Number required!"/>

                <p:outputLabel value="Address"/>
                <p:inputTextarea value="#{registrationDetails.address}"/>
            </h:panelGrid>
<p:commandButton  value="Submit" actionListener="#{registrationDetails.formSubmit}" id="buttonSubmit" 
                        update="form:msg form:regDetailPanel form:regData" ajax="true">
                <f:attribute name="fname" value="#{registrationDetails.firstName}"/>
                <f:attribute name="lname" value="#{registrationDetails.lastName}"/>
                <f:attribute name="loc" value="#{registrationDetails.location}"/>
                <f:attribute name="email" value="#{registrationDetails.email}"/>
                <f:attribute name="contact" value="#{registrationDetails.contactNumber}"/>
                <f:attribute name="address" value="#{registrationDetails.address}"/>
                <p:ajax event="click" immediate="true" update="form:regDetailPanel form:regData"/>
            </p:commandButton>

Answer 1

You have to clear the values in your backing bean so the value expressions like "#{registrationDetails.firstName}" return null or an empty string. i.e. in Java code, set all values that have to be cleared to null after the registration is successful.

This has to be done somewhere in your actionListener "#{registrationDetails.formSubmit}".

As you are using AJAX, you have to make sure the parts of your JSF page with the text fields are updated after the successful ajax call.