0

I want to select 1 of 2 (or 1 of 3) radio buttons and have certain pageblocksections. I tried to follow about a dozen examples but to no avail. The 2 I have been try to get to work are below.
My VF code:

                <apex:outputPanel >
                    <apex:pageBlockSection id="resourceSection" >
                         <apex:pageBlockSectionItem labelStyleClass="FRDformApplicationLabel">
                                <apex:selectRadio onchange="checkoldNewRes(this)" layout="lineDirection" 
                                            styleClass="FRDformApplicationRadioOpt" value="{!oldNewRes}" id="choose1" >
                                    <apex:selectOption itemValue="OLD" itemLabel="This is an existing Resource"/>
                                    <apex:selectOption itemValue="NEW" itemLabel="This is a new Resource"/>
                                </apex:selectRadio> 
                                <!-- Keep form from jumping to the top after onchange -->
                                <apex:actionSupport event="onchange" action="{!checkoldNewRes}" reRender="newData" />
                         </apex:pageBlockSectionItem>
                         <apex:pageBlockSectionItem labelStyleClass="FRDformApplicationLabel">
                         <apex:selectRadio layout="lineDirection" id="radios" >
                            <apex:selectOption itemLabel="radio1" itemValue="radio1" />
                            <apex:selectOption itemLabel="radio2" itemValue="radio2"/>
                            <apex:selectOption itemLabel="radio3" itemValue="radio3"/>
                        </apex:selectRadio>
                        </apex:pageBlockSectionItem>
                         <!-- yet another attempt -->
                         <div id="diva">
                            diva here - should only be visible if radio1 was selected.
                        </div>
                        <div id="divb">
                            divb is here
                        </div>
                        <div id="divc">
                            divc
                        </div>   
                            
                            <apex:inputHidden id="ResourceOLD" value="{!tempObj.ResourceOLD__c}"/>                  
                            <apex:inputHidden id="ResourceNEW" value="{!tempObj.ResourceNEW__c}"/>                                        
                            <apex:inputHidden id="NewResourceFlag" value="{!tempObj.NewResource__c}"/>
                    </apex:pageBlockSection>   
                
            <!-- Conditionally render one of these two sections -->

                    <!-- Displays fields for exiting resources -->
                <apex:pageBlockSection rendered="{!IF(oldNewRes=='OLD',True,False)}" id="oldRes">
                    <apex:outputPanel rendered="true">
                    existing resource stuff here - dropdown - rendered oldRes section
                    </apex:outputPanel> 
                </apex:pageBlockSection>
                
                <!-- Displays fields for new resources -->
                <apex:pageBlockSection rendered="{!oldNewRes=='NEW'}" id="newRes">
                    <apex:outputPanel rendered="true">
                        get lots of input texts and values from various select lists. 
                    </apex:outputPanel> 
                </apex:pageBlockSection>
                </apex:outputPanel>
        <!-- all Done! --> 
        </apex:pageBlockSection> <!--end of newData -->
                    </apex:outputPanel> <!-- end of row 1 panel -->

    </apex:pageBlock>  <!-- End block1 --> 
<script type="text/javascript">
    var j$ = jQuery.noConflict();
        j$(document).ready(function() {
            jQuery('[id$=diva]').hide();
            jQuery('[id$=divb]').hide();
            jQuery('[id$=divc]').hide();
            jQuery('input:radio[name$=radios]').change(function(){       
                var radio_value= $(this).val();
                if(radio_value=='radio1'){
                    jQuery('[id$=diva]').show();
                    jQuery('[id$=divb]').hide();
                    jQuery('[id$=divc]').hide();                
                }else if(radio_value=='radio2'){
                    jQuery('[id$=diva]').hide();
                    jQuery('[id$=divb]').show();
                    jQuery('[id$=divc]').hide();                
                }else{
                    jQuery('[id$=diva]').hide();
                    jQuery('[id$=divb]').hide();
                    jQuery('[id$=divc]').show();                
                }
            });
        });        
</script>
<script>
    function checkoldNewRes(Value) {
        alert('Value passed is  ' + Value);
        // We get Value passed is  [object HTMLInputElement]
        var inputold = document.getElementById("OLD");
        var inputnew = document.getElementById("NEW");
        var content1 = document.getElementById("Value").innerText;
        alert(content1); // nothing
        alert(inputold); // nothing
        alert(inputnew); // nothing
        if(Value == NULL){Value = 'OLD'}
        if(Value =='OLD') {
            inputold.style.display='block';
            inputold.required=True;
            inputnew.style.display='none';
            inputnew.removeattribute("required");
        }else{
            inputnew.style.display='block';
            inputnew.required=True;
            inputold.style.display='none';
            inputold.removeattribute("required");                
        }
    }    
    </script>

Controller:
public FRDResourceApplicationController ()
    {
        tempObj = new FRDResourceApplication__c();
        chkBx = false;  

        // Preselect radio button
        if(oldNewRes == NULL)
        {   
            oldNewRes ='OLD';
        }
    }
 
    public Pagereference checkoldNewRes(){        
        system.debug('Selected value is: ' + oldNewRes); 
        // NewResourceFlag is boolean in object 
        if(this.oldNewRes == 'old')
        {
            NewResourceFlag = false;
            displayResourceNameInputText = false;
        }
        else
        {
            NewResourceFlag = true;
            displayResourceNameInputText = true;
        }
        
        try
        {
            tempObj.NewResource__c=NewResourceFlag;
        }
        catch (DmlException ex)
        {
            ApexPages.addMessages(ex);
            return null;
        }
        
        return null;
    }

  • Please edit your question to include additional code. Code in comments is difficult to work with. – sfdcfox Jul 28 at 23:16
  • Thanks, Ysr Shk. I could not figure out how to make my copy-n-pasted content look more readable. – cw-DEO Jul 29 at 10:37
  • Thanks, sfdcfox. I clicked your link and was able to edit. – cw-DEO Jul 29 at 10:54
  • Can anyone help me with either of my radio button attempts? – cw-DEO Jul 29 at 19:43
  • Would it be easier for someone to assist if I deleted one of my attempts, for example just keep the check for NEW and OLD? That is only 2 radio buttons and the JavaScript looks clearer. I haven't been able to make one section appear for NEW and another section appear for OLD. I also need to store whichever was selected for other parts of my VF page and not having success with that. – cw-DEO Jul 30 at 10:38

Your Answer

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

Browse other questions tagged or ask your own question.