Clear values in Search form fields

I have designed a Search form to search for specific records based on search criteria. But once I have searched I want to clear the criteria fields to conduct a fresh search. There are 3 ways

1. Reset the bind parameters of the view objects by calling them in the bean that can be found at the below links.
http://forums.oracle.com/forums/thread.jspa?messageID=2563498#2563498 


http://forums.oracle.com/forums/thread.jspa?messageID=1579998#1579998 


http://radio.weblogs.com/0118231/2006/11/21.html


2. Use ResetButton to reset the form parameters. But it will reset the form fields’ values to the previous search criteria parameters.


3. The third way originates from the user experience. According to my experience users are least concerned about the VO bind parameters being refreshed or not, but what they actually want is to clear the form instantly and preferably with no server call that means on the client-side itself. The reason for the same is that all countries/clients/users do not have very fast internet as to virtually diminish the time taken to reset the form. Hence this method came up to clear the search form using Java Script. This way might not be suitable for all the situations and also does not replace the other two mentioned above but still it is very much efficient and helpful to provide the end-users pleasant experience.

All you have to do is follow the below 3 steps and it is done.

• Change your search form to <af:form> instead of <h:form>. After this the form looks like this.

<af:form id="searchForm">
   <af:panelPage title="Clear Search Form Parameters Example">
   <af:panelForm>

   <af:inputText id="firstName" value="#{bindings.TheFirstName.inputValue}"    label="#{bindings.TheFirstName.label}" required="#{bindings.TheFirstName.mandatory}"  columns="#{bindings.TheFirstName.displayWidth}">

      <af:validator binding="#{bindings.TheFirstName.validator}"/>

   </af:inputText>

   <af:inputText id="salary" value="#{bindings.TheSalary.inputValue}"  label="#{bindings.TheSalary.label}" required="#{bindings.TheSalary.mandatory}" columns="#{bindings.TheSalary.displayWidth}">

   <af:validator binding="#{bindings.TheSalary.validator}"/>

  </af:inputText>

• Create a Clear CommandButton as shown below and set the onClick property as clearAllFormFields() function.

<af:panelButtonBar>
   <af:commandButton actionListener="#{bindings.ExecuteWithParams.execute}" text="Search"  disabled="#{!bindings.ExecuteWithParams.enabled}"/>
   <af:commandButton text="Clear" onclick="return clearAllFormFields();"/>
</af:panelButtonBar>

• Now add the scriptlet function in the jspx page as shown below.

<script type="text/javascript">
   function clearAllFormFields(){
      //check if the object is not null. The object will be null when it is not rendered on the page  or is disabled. 
      if(document.forms["searchForm"].elements["firstName"] != undefined)

     document.forms["searchForm"].elements["firstName"].value="";
     if(document.forms["searchForm"].elements["salary"] != undefined)
     document.forms["searchForm"].elements["salary"].value="";
     return false;
   }

</script>

And it is done. Now just test run the page.