Form reset after clicking a button?

Question

vf page:

  <apex:page>
    <apex:form>
    <apex:inputtext value={!Value}/>
    <apex:commandButton value="Reset" onclick="this.form.reset();return false;" />
    <apex:commandButton value="Quote List" action="{!showlist}"/> 
    </apex:form>
    </apex:page>

i have two button are there first button is to reset and second button is to show list .when i click on the reset button before click the list it is reset the form when i click the reset button after clicking the list it is not working. How to do This one ?

Answer 1

I believe this.form.reset is in fact resetting your form, but the trouble is, when the "Quote List" button is pressed, to call the controller action showList, this is SETTING your values on the page to their variables in the controller.

For example:

Form is blank (text value in controller empty)

Enter text (text value in controller empty)

If you click reset here, the text area will be reset to nothing.

If you click Quote List here, then as a commandbutton this will SUBMIT your page to setValue() and it will put "hello" into value.

Therefore, the page, still looks like this

but now value = "hello" if you click "reset" the HTML form is in fact reset, but TO THIS value. If you alter the text area (no page reloading has been done) to be this:

and then click Reset.. it will reset the field:

Therefore the problem is not with the

this.form.reset()

not working, it is to do with what the QuoteList button is doing to the state of the page/controller values.

One way to beat the submission problem would be to remove the "action" attribute from the second button, Quote List, and instead use it to reRender a block of the page, in which you can re-trigger getters to load new lists of items, if this fits your functionality?

So your snippet in the question could become something like:

<apex:form >
<apex:inputtext value="{!value}"/>
<apex:commandButton value="Reset" onclick="this.form.reset();return false;" />
<apex:commandButton value="Quote List" rerender="redrawArea" /> 
</apex:form>

<apex:pageBlock id="redrawArea">
    {!value}
</apex:pageBlock>

You then have your logic in the getValue() method (remembering best practises about what should go in a getter of course!).

Answer 2

Your have to manually clear all input values like below in jquery.

    <apex:page controller="testController">
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script type="text/javascript">
            function resetForm(ele) {
                 $(ele).closest('form').find("input[type=text], textarea").val("");
                return false;
            }
            </script>
            <apex:form id="theForm">
            <apex:inputtext value="{!testVal}"/>
            <apex:commandButton value="Reset"  onclick="return resetForm(this);"/>
            <apex:commandButton value="Quote List" action="{!showlist}"/>
            </apex:form>
 </apex:page>

The other way is, reset all controller variables in controller and reRender the form.