0

I have a visual force page which has 2 radio buttons. Based on clicking a value on the radio button, i want one page block panel to be displayed and another one is hidden. The problem is the yes option does not work but the no option displays the right panel. The yes option does not display the yesidspan section but the no works and displays the noidspan. What am i missing on this ? My goal is to display yesidspan if they click yes and noidspan if they click no.

Code below

<apex:page standardController="ActiveChecklistLineItem__c" extensions="CorrectiveActionController" >
  <apex:form > 
      <apex:pageBlock id="trainersBlock">

          <apex:pageBlockSection >
            <apex:pageBlockSectionItem id="pgBlockSectionitem">
                <apex:outputText value="Please select corrective action?" />
                <apex:selectRadio id="idRadio1" value="{!selectedRadioValue}" onclick="boolFunction(this);"  >
                    <apex:selectOption itemValue="true" itemLabel="Yes" />
                    <apex:selectOption itemValue="false" itemLabel="No" />
                </apex:selectRadio>
            </apex:pageBlockSectionItem>
          </apex:pageBlockSection>

              <span id="YesidSpan" style="display:none">
              <apex:pageBlock>
                  <apex:pageBlockSection >
                      <apex:pageblockSectionItem >
                            <apex:outputlabel value="To:"/>
                      </apex:pageblockSectionItem>
                      <apex:pageBlockSectionItem >
                        <apex:inputText label="to email" maxlength="10" /> 
                      </apex:pageBlockSectionItem>
                      <apex:pageblockSectionItem >
                            <apex:outputlabel value="cco:"/>
                      </apex:pageblockSectionItem>
                      <apex:pageBlockSectionItem >
                        <apex:inputText label="cc email" maxlength="10"/> 
                      </apex:pageBlockSectionItem>
                      <apex:pageBlockSectionItem >
                          <apex:inputTextarea value="{!emailDesc}"/>
                      </apex:pageBlockSectionItem>
                  </apex:pageBlockSection>
              </apex:pageBlock>
          </span>

          <span id="NoidSpan" style = "display:none">
               <apex:outputPanel id="NoCorrectiveAction" >
                  <apex:pageBlockSection >
                      <apex:pageblockSectionItem >
                            <apex:outputlabel value="Issue Description:"/>
                      </apex:pageblockSectionItem>
                      <apex:pageBlockSectionItem >
                          <apex:inputTextarea value="{!issueDesc}"/> 
                      </apex:pageBlockSectionItem>

                  </apex:pageBlockSection>
              </apex:outputPanel>
          </span>

          <apex:pageBlockButtons location="bottom">
            <apex:commandButton value="Submit" action="{!redirectToChecklistPage}" />

        </apex:pageBlockButtons>
      </apex:pageBlock>
  </apex:form>

<script> 
        function boolFunction(variable)
        {
            var bool = variable.value;
            if(bool == 'true')
            {
                document.getElementById('YesidSpan').style.display = 'block';
                document.getElementById('NoidSpan').style.display = 'none';
                //alert('yes clicked');
            }
            else
                document.getElementById('NoidSpan').style.display = 'block';
                document.getElementById('YesidSpan').style.display = 'none';
        }   
    </script>   
</apex:page>
  • are you sure you are getting value here ` var bool = variable.value;` check bool. – Tushar Sharma May 20 '16 at 11:27
1

You missed the brackets for else part. The line document.getElementById('YesidSpan').style.display = 'none'; is outside of if else part and is always executed irrespective of the true false value. That's why it is not working as expected.

Please update the code as mentioned below by putting {..} around else block. Hope it will solve your problem.

New Code

    function boolFunction(variable)
    {
        var bool = variable.value;
        if(bool == 'true')
        {
            document.getElementById('YesidSpan').style.display = 'block';
            document.getElementById('NoidSpan').style.display = 'none';
            //alert('yes clicked');
        }
        else
        {
            document.getElementById('NoidSpan').style.display = 'block';
            document.getElementById('YesidSpan').style.display = 'none';
        }
    }

Old Code

function boolFunction(variable)
{
    var bool = variable.value;
    if(bool == 'true')
    {
        document.getElementById('YesidSpan').style.display = 'block';
        document.getElementById('NoidSpan').style.display = 'none';
        //alert('yes clicked');
    }
    else
        document.getElementById('NoidSpan').style.display = 'block';
        document.getElementById('YesidSpan').style.display = 'none';
}
  • Thanks Saroj Bera .. This fixed the problem.. Bad braces always causes problems.. – buyan kumar May 20 '16 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.