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!

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 | |
  • Thanks a lot for pointing it out, Mohit :). I would go through the best practices guide. :) – Arun Jan 5 '18 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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.