function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ashu sharma 38Ashu sharma 38 

how to make search icon be as functional

Hello,


As my requirement i have a create a vf page,now instead of using command button i am trying to use search icon,as i achieved ,but how to make it as functional as same like command button.

 <!-- <apex:inputText value="{!}"   /> -->
                <input type="{!selected}"  id="text" placeholder="Search.." class="style1"/>
                <!-- <apex:commandButton value="Search Name" action="{!myRecords}" /> -->
                <apex:image url="{!$Resource.searchIcon}" width="20" height="15" />
 
sagar jogisagar jogi
Hello Nithish,

Please try to use below code.

1) when you use HTML input text box , you can't access getter setter variables in method. So you need to pass it as a parameter
2) On <apex:image /> tag I added style="cursor:pointe" and also called javascript function onclick and in javascript function I am getting value of textbox and passing it into actionfunction.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" />
    <script>
        function myRecordsJS () {
            myRecordsAF($('#text').val());
        }
    </script>
    <apex:form >
        <apex:outputPanel id="myPanel">
            selected value : {!selected} <br/>
            <input type="{!selected}"  id="text" placeholder="Search.." class="style1"/>
            <!-- <apex:commandButton value="Search Name" action="{!myRecords}" /> -->
            <apex:image url="{!$Resource.searchIcon}" width="20" height="15" onclick="myRecordsJS()" style="cursor:pointer" />
            <apex:actionFunction action="{!myRecords}" name="myRecordsAF" reRender="myPanel">
                <apex:param assignTo="{!selected}" name="selected" value=""/>
            </apex:actionFunction >
        </apex:outputPanel>
    </apex:form>