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() {You can save the JavaScript function in a file, eg utils.js and reference it from a <script> tag in the <afh:head>:
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;
}
}
}
}
(...)
<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 (6)
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 | April 26, 2008 2:02 AM
Posted on April 26, 2008 02:02
Definitely not with the method explained in this blog (javascript).
You can define a method in yourBackingBean as: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:
Up to you to code executeYourRequirements() to answer your needs then.
Posted by Didier Laurent | April 26, 2008 4:41 PM
Posted on April 26, 2008 16:41
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 | April 28, 2008 1:53 AM
Posted on April 28, 2008 01:53
Thank you so much. I've been searching for something like this..
Posted by vanessa | August 27, 2008 6:58 AM
Posted on August 27, 2008 06:58
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 | December 17, 2008 6:55 AM
Posted on December 17, 2008 06:55
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 | December 20, 2008 2:26 AM
Posted on December 20, 2008 02:26