+ Start a Discussion
❤Code❤Code 

Change focus on button click in vf page

Hi All,

I have a button and a textbox in vf page. I want when i click the button the focus should go to textbox. Below is my vf page - 

        <apex:commandbutton value="Search" action="{!FindAllName}" rerender="geographies" oncomplete="renderChosen()" style="width:120px;margin-left:30px;" status="actStatusId" id="cmdbutton" />    
                        </div>
                        
                        <apex:actionStatus id="actStatusId">
                            <apex:facet name="start" >
                                <apex:image url="/img/loading32.gif" width="15" height="15"  style="float:left;margin-left: 430px;;margin-top:-16px;"/>              
                            </apex:facet>
                        </apex:actionStatus>
                        
                        
                        <apex:pageBlockSectionItem id="geo">
                            <apex:outputLabel value="{!$ObjectType.RFP__c.Fields.Geography__c.Label}"  style="width:87%; float:right;height:12px;font-weight:bold;font-family:Arial;font-size:11px;color:#2F4F4F;"/>
                            <apex:outputPanel id="geographies" layout="block"  styleClass="requiredInput" style="width:82%; float:right;margin-top:-10px;">
                                <apex:outputPanel id="geos" layout="block"  styleClass="requiredBlock"/>
                                <apex:outputText value="Please Refine Your Search" rendered="{!IF(results >1000,'true','false')}" style="margin-left:-2px;width:100%; margin-top:-10px;font-weight:bold;font-family:Arial;font-size:11px;color:red;"/>
                                <apex:outputText value="No Results Found" rendered="{!IF(results ==0,'true','false')}" style="margin-left:-2px;width:100%; margin-top:-10px;font-weight:bold;font-family:Arial;font-size:11px;color:black;"/>
                                <apex:selectList value="{!selectedGeographyIds }" multiselect="true" id="selectedGeographies" styleClass="fullWidth chzn-select" >
                                    
                                    <apex:selectOptions value="{!AllName}" id="movieTextBox"></apex:selectOptions>
                                    
                                </apex:selectList>
                                
                                <apex:outputPanel layout="block" styleClass="errorMsg" >
                                    <apex:outputText value="{!errorMap['selectedGeographies']}" 
                                                     escape="false" rendered="{!errorMap['selectedGeographies'] != ''}" />
                                </apex:outputPanel>
                            </apex:outputPanel>
                        </apex:pageBlockSectionItem>
                    </apex:actionregion> 

Regards
Andy BoettcherAndy Boettcher
What is that "renderChosen();" javascript in the "oncomplete" of the button?  I would just put 
document.getElementById("whatever").focus(); at the end of that?
❤Code❤Code
Hi that is autocomplete function which I am calling on complete..can u let me know why changes I need to make..
Raviraj S 1Raviraj S 1
Hi, 
    I am not getting the focus on search textbox when clicking the outer div.User-added image
I tried with the below code but not working. Can you please provide any solution.
focusEvent : function(component, event, helper) { 
        var modal = component.find('lookup-pill');
        $A.util.addClass(modal,'focused');
        var subModal = component.find('lookup');
        $A.util.addClass(subModal,'focused');
    }