I have two fields.

  1. Lookup
  2. Preferences

Based on my Preferences I want my lookup to be visible and hidden. I am using jquery j$(".class-name").hide() to hide the lookup and j$(".class-name").show() to show back.

Here is the condition on when the lookup should be seen and when not.

  1. In Preferences when the user selects only "XYZ" I want lookup to be hidden.
  2. In Preferences, when the user selects anything other than XYZ then I want to show the lookup again.

The problem here is it hides properly but when I try to show it an extra input box is shown in front of the lookup which I believe is coming from my show method. I tried using reRender but failed.

New to Salesforce and Coding. Any help will be appreciated.

  • 1
    Can you add some code to support what you are trying to do here?
    – VarunC
    Oct 30, 2014 at 19:59
  • This is the Lookup field which I want to show and hide. <apex:inputField value="{!newReq.Site__c}" html-class="hideSite"/> <apex:outputField value="{!projDetail.Job_Number__c}" />
    – LazyBones
    Oct 30, 2014 at 20:18
  • JavaScript <script type="text/javascript"> function hideColumn(a) ` {` if(a.value != 'Materials') ` {` ` j$ = jQuery.noConflict();` j$(".hideSite").show(); j$(".hidePTN").show(); ` }` ` else` ` {` j$ = jQuery.noConflict(); ` j$(".hideSite").hide(); ` j$(".hidePTN").hide(); } ` }`
    – LazyBones
    Oct 30, 2014 at 20:18

1 Answer 1


Here is a page that you should be able to add in your org to see some working code that does what I think you want:

<apex:page standardController="Contact">

    <apex:inputField value="{!Contact.AccountId}" html-class="targetClass"/>
    <apex:inputField value="{!Contact.Level__c}" html-class="controlClass"/>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"/>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('.controlClass').change(function () {
        var control = j$(this);
        var hide = control.val() == 'Secondary';
        var target = j$('.targetClass');
        if (hide) {
        } else {


The jQuery code waits until the page has loaded then attaches code that is run whenever the picklist changes. This code checks the current value of the picklist and shows or hides the other field accordingly.

Hopefully you can adapt this to your fields and class names etc.

  • @sus I've just cut and pasted the code I posted back into an org and it hides and shows the lookup field depending on what the picklist field is set to. (The only problem I can imagine is that you do not have a Contact.Level__c picklist in your org.) When something doesn't work, be detailed about what the problem is, and if there is a compile error or exception quote the message and the line number.
    – Keith C
    Oct 31, 2014 at 9:27
  • I am not getting any error but the fields are not getting hidden. so i have no error on my vs page. I was doing some research and found out reRender helps to achieve this, however i exactly did not understand how this works. I saw some code but I am not very clear <apex:inputField id="reqType" styleClass="reqLineType" html-class="requist" value="{!newReq.Requisition_Type__c}"/> <apex:actionSupport event = "onChange" reRender ="anyName" So over here, where should i place action support ? On the input field which I want to hide or on the input field where the condition takes place.
    – LazyBones
    Oct 31, 2014 at 15:34
  • @sus Yes you can do it with re-rendering. But any small typo breaks JavaScript and such typos are easily fixed. Have you checked your browser's JavaScript console for JavaScript errors?
    – Keith C
    Oct 31, 2014 at 15:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .