Reset button doesn't empty fields


The <af:resetButton> component: doesn't empty the fields after a Form was submitted.
Instead, it reverts them to their values right after the last Form submission.

If you want to empty the values in the Form elements, you have to use JavaScript.

Suppose a JSF page with a field identified as 'username':

<af:inputText label="Username" (...) id="username"/>

The following example nullifies it
 function resetFields() {
   document.forms[0].elements['username'].value='';  
}

A more generic JavaScript function, working for all fields in a Form, but also for other types of widgets (list & checkbox) could be:
function moreGenericResetFields() {
   for ( i=0; i < document.forms[0].elements.length; i++) {
      if ( ! ( document.forms[0].elements[i].readOnly  || document.forms[0].elements[i].disabled) ) {

         if (( document.forms[0].elements[i].type == 'text' ) || ( document.forms[0].elements[i].type == 'textarea' ) || ( document.forms[0].elements[i].type == 'password' )) {
            document.forms[0].elements[i].value = '';
         }

         if ( document.forms[0].elements[i].type == 'checkbox' ) {
            document.forms[0].elements[i].checked = false;
         }

         if ( document.forms[0].elements[i].type == 'select-one' && ( document.forms[0].elements[i].length != 0 )) {
            document.forms[0].elements[i].options[0].selected = true;
         }

      }
   } 
}
You can save the JavaScript function in a file, eg utils.js and reference it from a <script> tag in the <afh:head>:
(...)
<afh:head>
  <script src="utils.js" type="text/javascript"></script>
  (...)
</afh:head>
<afh:body>
  (...)
  <af:inputText label="Username" (...) id="username"/>
  (...)
  <af:commandButton text="Reset Via JavaScript" onclick="resetFields()"/>
  (...)
</afh:body>
(...)

I've added example  #2 in my sample page.

Comments:

Hi Didier, I need your help. I successfully created a form which contains Header part and Detail part in single form. I successfully saved the record into the master table and child table. The form is designed in this way..Header part will contains input text and selectOneChoice , etc. For detail i created a table which contains Add button. This button is used to entered the values in popup window and then it will be populated in the table. In this way i created Master-Detail for inserting the record. Now, I want to clear the values in the header part as well as in the detail (table part) after successfully inserting the record in the table. Kindly help me how to fix it. Thanks & Regards Vimalan Balan

Posted by Vimalan Balan on April 25, 2008 at 07:02 PM CEST #

Definitely not with the method explained in this blog (javascript).
Your requirements are completely different.

I would code it in the backing bean, in the method executed when clicking the Commit button.
Suppose your commit is defined on your page as:
                                                          text="Commit"
                                      action="#{yourBackingBean.OnCommit}"/>
You can define a method in yourBackingBean as:
    public String OnCommit() {
        BindingContainer bindings = getBindings();
        OperationBinding operationBinding = bindings.getOperationBinding("Commit");
        Object result = operationBinding.execute();
        /*
         * Put below your own code as per your requirement;
         */
        executeYourRequirements();
       
        return null;
    }
Up to you to code executeYourRequirements() to answer your needs then.

Posted by Didier Laurent on April 26, 2008 at 09:41 AM CEST #

Hi Didier, Thanks for your reply. I done it based on your hints. Its working fine. Now another requirement i am having. Kindly help. You know that this is my application developing using ADF framework. In my application, i am having menu bar which contains Creation Form and Search Form. If i click the Search form first time and then provided search criteria to get the result. After that i clicked Creation Form and then i am clicking Search Form. This time i need to display fresh form but it showing previous entered search and result value in the screen. How to clear it when we navigate through menus. Note: After search, i will view the details of each row in separate page and will back to result page, at this time result and search value need to retain. Don't mistake me for to distrub you again and again. Since I am only the person developing the application. Thanks & Regards Vimalan Balan

Posted by Vimalan Balan on April 27, 2008 at 06:53 PM CEST #

Thank you so much. I've been searching for something like this..

Posted by vanessa on August 26, 2008 at 11:58 PM CEST #

Thanks for the javascript on resetting values on a page. The af:resetButton just didn't do the trick. It saved me oodles of time. I've notice something after implementing this script. Intermittently, my pages don't display. I click the menu option and have to click on the page and then the page shows up. Could the fact that some of my pages use h:form instead of af:form? Has anyone reported this problem? Thanks, Dave

Posted by David Gress on December 16, 2008 at 10:55 PM CET #

Hi Dave, I'm not aware of such an issue I would debug the javascript to diagnose the issue further. Regards, Didier.

Posted by Didier on December 19, 2008 at 06:26 PM CET #

Post a Comment:
Comments are closed for this entry.
About

Didier Laurent - Sr Principal Support Engineer in the JDeveloper team

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today