Compare What User Typed in VF inputText with JavaScript

Question

In the code below, I need to be able to use JS to call renderResults(); in my controller, only if a user clears the field where customerToClearSearchText goes on the VF page.

If I remove the condition, the method successfully executes; so I know that's where the problem is.

<apex:outputpanel >
    <apex:inputText id="customerToClearSearchText" value="{!customerToClearSearchText}" rendered="{!customerToClearInputRendered}" onkeydown="showResults()"/>
    <apex:actionFunction name="CallApexMethod" action="{!renderResults}"/>
    <script>                    
        function showResults(){
            var st = document.getElementById("customerToClearSearchText").value;
            if(st.length == 0){
                CallApexMethod();
            }
        }    
    </script>                
</apex:outputpanel>

To no avail I also tried:

• document.getElementById("customerToClearSearchText")
• if(!st)
• if(!!st)

My guess is it doesn't work because the condition is evaluating the (now) populated string - customerToClearSearchText - in the controller; not the length of anything the user is (now) putting into the field on the page.

At any rate, is there anyway to do what I'm trying to accomplish? BTW, I'm completely new to JS.

Answer 1

Your mistake is in assuming that the ID you specify on the input element is the same that will be rendered in the page. Unfortunately, that's not how Visualforce works; it prepends the ID with additional characters to make it unique. The typical way to resolve this is to use a partial-match selector or even a different attribute altogether. The following should work:

var st = document.querySelector("[id$=customerToClearSearchText]").value;
if(!st) {
  CallApexMethod();
}

---

Edit: As an alternative, you can pass in "this" to link to the element:

<apex:inputText id="customerToClearSearchText" value="{!customerToClearSearchText}" rendered="{!customerToClearInputRendered}" onkeydown="showResults(this)"/>

...

function showResults(el){
    var st = el.value;
    if(!st) {
        CallApexMethod();
    }
}    

---

In JavaScript, onkeydown occurs before the input's value changes; use onkeyup instead.