1

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 ?

4
  • What is the behaviour you would like to see? Do you want the input text area to be reset by the button, but this is not happening after the show list button has been clicked? Feb 12, 2014 at 11:11
  • no this is not happening when list button is clicked
    – Teja
    Feb 12, 2014 at 11:46
  • 1
    Hmm.This must be a very hypothetical question, right? Because your code snippet doesn't have a controller, you're missing quotes around {!Value} (syntax error) and when I replicate this in my own org, this.form.reset(); doesn't do anything at all in any scenario! Could you perhaps provide more concrete code samples, and maybe even a screenshot of the VF page involved? Feb 12, 2014 at 11:58
  • no .i have a controller.any started working on each text box when button click it is shows to empty. salesforce.stackexchange.com/questions/27643/… check this for my code and i am doing with one 'document.getElementById('{!$Component.page1:form1:autocomplete1}').value='';' .can you guide me the same way how we can do selectlist it is not taking the value"document.getElementById('{!$Component.page1:form1:selectelist:selectoption}').value='Equal';" .i cant able to set the value to select list .as Equal
    – Teja
    Feb 12, 2014 at 12:14

2 Answers 2

5

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)

step1

Enter text (text value in controller empty)

step2

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

step3

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:

step4

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

Step5

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!).

2
  • i rerender attribute is not there in page block
    – Teja
    Feb 13, 2014 at 6:00
  • the rerender command goes in the commandButton and the target id goes in the page block.. please see updated answer.. Feb 13, 2014 at 9:32
1

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.

1
  • Indeed! and equally, you could put a "reset" function in the controller, and an action on the button, thus clearing out your values.. saves pulling in a whole jquery library, but at the cost of making a full server trip!! Swings and roundabouts. Feb 13, 2014 at 9:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .