1

This seems to be pretty simple and common requirement, but not able to make it work in my Vf page.

I have a search command button which queries records and display in tabular format (as shown in code), now i am trying to add a clear command button for resetting the value in inputText Field to empty string, but couldn't achieve the reset/clear behavior with inputText Field. Search string can still be seen in the inputText after clicking clear button.

<apex:page standardController="Object__c" extensions="ObjectControllerExt" id="page" sidebar="false">
<apex:form id="form">
    <apex:pageMessages id="errors" />
    <apex:pageBlock id="pgtable" Title="Application Search Section" >
            <table width="100%" border="0">
                <tr>  
                    <td width="200" valign="top">
                        <apex:pageBlock id="reqNo" title="Enter Request Number">
                            <apex:inputText id="srchFld" value="{!searchKey}" /> 
                            <apex:commandButton value="Search" action="{!runSearch}" reRender="results,errors"/>  
                            <apex:commandButton id="cmdClear" value="Clear" onclick="clearSearchField('{!$Component.srchFld}')" reRender="results,errors"/> 
                            <!-- I have a action controller method on 'clear' command button to clear the value in 'searchKey' -->
                            <apex:outputText id="ot" value="Test"/> <!-- works for outputText -->
                        </apex:pageBlock>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <apex:pageBlock id="results">
                            <apex:pageBlockTable value="{!requests}" var="p">
                                <apex:column >
                                   <apex:facet name="header">Request ID</apex:facet>
                                   <apex:outputText value="{!p.Name}" />
                                </apex:column>
                                <apex:column >
                                    <apex:facet name="header">Request Status</apex:facet>
                                    <apex:outputText value="{!p.RequestStatus__c}"/>
                                </apex:column>
                                <apex:column>
                                    <apex:facet name="header">Req Description</apex:facet>
                                    <apex:outputText value="{!p.SKU_Desc__c}"/>
                                </apex:column> 
                            </apex:pageBlockTable>
                        </apex:pageBlock>
                    </td>
                </tr>
            </table>
    </apex:pageBlock>
  </apex:form> 
<script>
   function clearSearchField(searchField) {
     var v = document.getElementById(searchField).value;
     console.log(v);
     document.getElementById(searchField).innerHTML = ''; 
     var k = document.getElementById(searchField).value;
     console.log(k);
     document.getElementById('page:form:pgtable:reqNo:ot').innerHTML = 'Test - update'; // This one works 
   }
  </script>
</apex:page>

Appreciate your time in pointing what's going wrong here.

Thanks!

Improve this question

2 Answers 2

Reset to default
2

Following the best practice documented here I would trace the whole hierarchy for accessing the Id .

Here is the modified code for same 

<apex:commandButton id="cmdClear" value="Clear" onclick="clearSearchField('{!$Component.page.form.pgtable.srchFld}')" reRender="results,errors"/>

Also in your Javascript use the value attribute to set it to empty 

document.getElementById("searchField").value = ""
Improve this answer
1
  • Thanks a lot for pointing it out, Mohit :). I would go through the best practices guide. :)
    – Arun
    Commented Jan 5, 2018 at 14:16
1

If you want to reset the text field value to something then you need to set value property of the element, not innerHTML:

<script>
  function clearSearchField(searchField) {
    var el = document.getElementById(searchField);
    console.log('Before resetting: ' + el.value);
    el.value = ''; 
    console.log('After resetting: ' + el.value);
  }
</script>

NOTE: no need to search that element again and again document.getElementById(searchField) you can use the first reference to that element to read/updated properties.

Improve this answer
0

You must log in to answer this question.

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