2 
<apex:page controller="newOpportunityController" tabStyle="Contact" >
<body>
    <script language="javascript" type="text/javascript">

    function hidefieldsforfemale()
        {
            if (document.getelementbyid('{!$Component.f1.pb2.pbs2.female}') == "Female" )
                {
                    document.write("inside female section");
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id1}').style.display='none';
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id2}').style.display='none';
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id3}').style.display='none';
                 }
                else
                  {
                    document.write("inside male section");
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id1}').style.visbility="visible";
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id2}').style.visbility="visible";
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id3}').style.visbility="visible";
                   }
            return true;
          }

</script>


  <apex:form  id="f1">
    <apex:pageMessages />
      <apex:pageBlock id="pb1" rendered="{!showp2op1}" title="Members already added">
        <apex:outputPanel id="op1"  >
              <apex:pageBlockTable value="{!contactstoadd}" var="c" >
                  <apex:column value="{!c.firstname} {!c.lastname}" headerValue="Name" />
            </apex:pageBlockTable>
            <apex:commandButton action="{!page3Next}" value="Confirmation" immediate="true" />
        </apex:outputPanel>


      </apex:pageBlock>
         <apex:pageBlock id="pb2" title="Member Information" mode="edit">

               <apex:pageblockSection id ="pbs1" title="Name and Contact" columns="2">
                   <apex:inputfield value="{!cont.firstname}"/>
                   <apex:inputfield value="{!cont.lastname}"/>
                   <apex:inputfield value="{!cont.mobilephone}"/>
                   <apex:inputfield value="{!cont.email}"/>
                   <apex:inputfield value="{!cont.birthdate}"   />
               </apex:pageblockSection>

              <apex:pageblockSection id="pbs2" title="Member Details" columns="3">
                  <apex:inputfield value="{!cont.Gender__c}" onchange="hidefieldsforfemale();" id="female" 
                                   onfocus="alert('focus on field')"  />
                   <apex:inputfield value="{!cont.Birthstar__c}"/>
                   <apex:inputfield value="{!cont.Related_to_Householder__c}"/>
                   <apex:inputfield value="{!cont.Know_Sanskrit__c}"/>
                   <apex:inputfield value="{!cont.Service_Interest__c}"/>
                   <apex:inputfield value="{!cont.Work__c}"/> 
                   <apex:inputfield value="{!cont.Upanayanam__c}" id="id1"/>                       
                   <apex:inputfield value="{!cont.Veda_Adhyayanam_Status__c}" id="id2"/>                       
                   <apex:inputfield value="{!cont.Veda_Patasala__c}" id="id3" />                    
               </apex:pageblocksection>


                <apex:pageblockSection title="Address Information" columns="2">
                   <apex:inputfield value="{!cont.mailingstreet}"/>
                   <apex:inputfield value="{!cont.mailingcity}"/>
                   <apex:inputfield value="{!cont.mailingstate}"/>
                   <apex:inputfield value="{!cont.mailingcountry}"/>
                   <apex:inputfield value="{!cont.mailingpostalcode}"/>
               </apex:pageblockSection>




        <apex:pageBlockButtons location="bottom">
             <apex:commandButton action="{!page1Next}" value="Previous" immediate="true" rendered="{!p2button1}"/>
             <apex:commandButton action="{!addmorecontacts}" value="Add more members" rendered="{!p2button2}"/>
             <apex:commandButton action="{!back2search}" value="Save & Back to search results" rendered="{!p2button3}"/>
             <!-- apex:commandButton action="{!page3Next}" value="Confirmation"  /-->

                <!--apex:commandButton action="{!saveacct}" value="Save"/ -->

        </apex:pageBlockButtons>

</apex:pageBlock>

When I chooose the picklist value of female, the fields with id1, id2 and id3 should be hidden. This is somehow not working. Any help would be appreciated.

Also, could this be done using VF itself. Please advise your thoughts.

Improve this question
4
  • Your browser's developer tools have "Inspect Element" where you can check the ID values, a Console where you can see console.log debugging output or coding errors and a full blown debugger. See e.g. here. Invest a bit of time in learning the basics with these tools. One problem I can see is that while there is a getElementById there is not a getelementbyid.
    – Keith C
    Commented Jul 3, 2015 at 15:45
  • Thanks Keith. The getElementById suggestion worked..but, the fields are not still getting hidden. I went through the link but honestly feel a little overwhelmed and not sure where "exactly" to look. I was looking at the "console".
    – JJSHHS
    Commented Jul 3, 2015 at 16:31
  • 'SAMEORIGIN'. 2Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('cs22.salesforce.com') does not match the recipient window's origin ('null'). login.salesforce.com/17181/logo180.png Failed to load resource: the server responded with a status of 404 (Not Found) /jslibrary/1429643498000/sfdc/main.js:963 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org. I also looked at the INSPECT element but didn't any evt listeners for "ONCHANGE"
    – JJSHHS
    Commented Jul 3, 2015 at 16:31
  • Because Salesforce pages have a lot of JavaScript already you have to get used to ignoring messages not relevant to your problem. Adding console.log calls and watching out for them is the simplest way to start debugging. I've posted an answer.
    – Keith C
    Commented Jul 3, 2015 at 17:00

2 Answers 2

Reset to default
1

This should work:

<script>
function hidefieldsforfemale() {
    var gender = document.getElementById('{!$Component.f1.pb2.pbs2.female}').value;
    var display = gender == 'Female' ? 'None' : 'Inline';
    document.getElementById('{!$Component.f1.pb2.pbs2.id1}').style.display=display;
    document.getElementById('{!$Component.f1.pb2.pbs2.id2}').style.display=display;
    document.getElementById('{!$Component.f1.pb2.pbs2.id3}').style.display=display;
}
</script>

Your code was comparing the DOM element with "Female" rather than the value of that DOM element. You were also setting the display attribute in one case and the visibility in the other rather than flipping the value of one attribute.

On the question of whether it can be done in Visualforce, yes it can. You can re-render part of the page with rendered attribute of the apex:inputField set to a Boolean expression based on the gender value. The UI is a bit slow to respond (compared to the instant response you get with JavaScript) but the code is cleaner and that approach is more in keeping with the design of Visualforce.

Improve this answer
9
  • Thanks Keith. I was actually troubleshooting and realized both the mistakes. Thanks for pointing out. I tried the code you gave but still the fields are NOT hiding...
    – JJSHHS
    Commented Jul 3, 2015 at 17:04
  • @JJSHHS The above worked for me in a stripped down version of your page. So you'll have to debug further. Note that without more work in the JavaScript its just the fields and not the field labels that are hidden. You should give the non-JavaScript approach a go.
    – Keith C
    Commented Jul 3, 2015 at 17:10
  • On taking a closer look, I realized that of the 3 fields that I want to hide, one of them is getting hidden (it's a text area field) but the labels are not hidden, the other 2 fields are picklists and they're not getting hidden. How do I hide the labels and fields =)
    – JJSHHS
    Commented Jul 3, 2015 at 17:10
  • OK, what is the non-Javascript approach that I should take? Action Function?
    – JJSHHS
    Commented Jul 3, 2015 at 17:11
  • Update - When I tried to do this, var d1=document.getElementById('{!$Component.f1.pb2.pbs2.id1}').style.display; alert(d1), the field is removed from the page, but at the end of the function, it shows the field back again...what's causing the display to be set to true again?
    – JJSHHS
    Commented Jul 3, 2015 at 17:57
1

I tried to go down the path of using actionsupport and calling the method in the controller. I'm still not able to get this to work...the system.debug itself isnt' getting called which makes me believe that the action method isn't getting triggered. Any thoughts?

Update below from Jul 6,

OK, I did a scaled down version of actionsupport and it's working. However, when I add a required field like Contact's last name to the page, SF somehow "wipes" out the other fields from the page. Any ways to get around it?

<apex:page controller="testActionSupport">
<apex:pageblock>
    <apex:form>
            <apex:pageblocksection>
                <apex:inputfield value="{!cont.lastname}"/>
                <apex:inputField id="id3" value="{!cont.gender__c}" >
                    <apex:actionsupport event="onchange" action="{!checkgender}" immediate="true"/>
                </apex:inputField>
                <apex:inputfield id="id4" value="{!cont.Upanayanam__c}" rendered="{!id4rend}" />
                </apex:pageblocksection>
    </apex:form>




  public class testActionSupport {
    public Contact cont{get;set;}
    public Boolean id4rend{get;set;}

 public testActionSupport(){
    if (cont==null) {cont = new Contact();}
    id4rend=false;
 }
public void checkGender(){
    system.debug('inside checkGender');
    if (cont.gender__c == 'Male'){
        id4rend=true;
    }
    else
    {id4rend=false;}

}

}
Improve this answer

You must log in to answer this question.

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