You need to sign in to do that
Don't have an account?
Ashu 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" />
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" />
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>