+ Start a Discussion
Gayathri Adoni04Gayathri Adoni04 

Visualforce example for Radio button and Dropdown

Hi All,

My requirement is I have 2 radio buttons byname Movies,Events and When i click on movies related Movielist dropdown should appear similarly for events.I have a submit button byname ClickMe,if i click that button i want to display selected movie or an event.

I have done it partially,i need any of ur help as i am new to salesforce i am not exposed to these kind of scenarios.So please help me out.
I am sharing my code.Thanks in advance.


The dropdown in red box should come only if select any of above radio button.The text in yellow box should come only after Clicking Click Me button.
*********Vfpage******************

<apex:page id="pp" title="Movie's Now" controller="Movies" showHeader="false">
  <Apex:form >
   <apex:pageBlock title="Welcome to MOvie Selection Process">
   
   <!--   For Selecting Movie and Play        -->
      <apex:selectRadio value="{!s}" rendered="true">
        <apex:selectOptions value="{!items}"/>
      </apex:selectRadio><p/>
         <apex:actionSupport event="onclick" action="{!Click}" ReRender="in" >
            <apex:param assignTo="{!s}" name="ss" value="{!Movies}" />
         </apex:actionSupport>
           <!--<apex:actionFunction action="{!MovieSelection}"  name="MovieLocked" /> 
           <apex:actionFunction action="{!EventSelection}"  name="EventLocked" />-->
           
           <!-- for dropdown list -->
            <apex:selectList size="1" value="{!newmovies}" multiselect="false" rendered="{!newMovies!=null}" onclick="MovieSelection">
                <apex:selectOptions value="{!Movies1}"/>
                <apex:actionSupport event="onchange" reRender="in" action="{!MovieSelection}"/>
            </apex:selectList>
        
        
         <apex:selectList size="1" value="{!newEvents}" multiselect="false" rendered="{!newEvents!=null}">
            <apex:selectOptions value="{!Events1}"/>
        </apex:selectList>
        
        <!-- command button -->
        <apex:commandButton value="$$Click Me$$" action="{!Click}" rerender="out" status="status"/>
   </apex:pageBlock>
   
   
   <apex:outputpanel id="in" rendered="{!lmve.size != 0 && newEvents!=null || newmovies!=null}">
    
                              <apex:actionSupport event="onchange" rerender="out" status="status"/>
                          
   </apex:outputpanel>
   
   
   
   <apex:outputPanel id="out" rendered="{!lmve.size != 0}">
           <apex:outputText value="{!lmve}">The selected option is "{!s}"</apex:outputText>
           <apex:outputText value="{!lmve}">The selected Movie is "{!Events}"</apex:outputText>
          
     </apex:outputPanel> 
  </Apex:form>
</apex:page>
 
************Controller class**********************


public class Movies
{

  public String s{get;set;}
  public String name{get;set;}

  public boolean Movieflag{get;set;}
  public boolean Eventflag{get;set;}
  public  List<Movie__c> lmve{Get;Set;}
  public String Events{get;set;}
  public String Movies { get; set; }
  public boolean displayflag{get;set;}
  public List<SelectOption> options1{get;set;}
  public List<SelectOption> options2{get;set;}
  
  
  String[] newmovies= new String[]{};
  
  public String[] getnewmovies() {
            return newmovies;
        }
            
        public void setnewmovies(String[] newmovies) {
            this.newmovies= newmovies;
        }


  String[] newEvents=new String[]{};
  
  public String[] getnewEvents() {
            return newEvents;
        }
            
        public void setnewEvents(String[] newEvents) {
            this.newEvents= newEvents;
        }
  
  public Movies(){
   System.Debug('Helllo');
  }
  
  
  public PageReference Click()
  {
   Eventflag=false;
   if(s!=null && s.equalsIgnoreCase(Movies)){
    Movieflag=true;
   }
   
   else if(s!=null &&s.equalsIgnoreCase(Events)){
   Eventflag=true;
   }
   
   List<Movie__c> lmve=new List<Movie__c>();
   if(s!=null)
   lmve=[SELECT Id,Cinemas__c,name__c,Price__c,Tickets__c from Movie__c];
   
   return null;
  
  }
  
  
   public pagereference MovieSelection() 
    {
        Events=null;
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.confirm,'You Selected a movie'));
        return null;  
    }
    
    
    public pagereference EventSelection() 
    {
        Movies=null;
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.confirm,'You Selected an Event'));
        return null;  
    }
  

   public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('Movies','Movies'));
        options.add(new SelectOption('Events','Events')); 
        return options; 
    }
    
    public List<SelectOption> getMovies1() {
            List<SelectOption> options1 = new List<SelectOption>();
            options1.add(new SelectOption('Bahubali','Bahubali'));
            options1.add(new SelectOption('Rangitaranga','Rangitaranga'));
            options1.add(new SelectOption('BhaiJan','BhaiJan'));
            return options1;
        }
    public List<SelectOption> getEvents1() {
            List<SelectOption> options2 = new List<SelectOption>();
            options2.add(new SelectOption('abc','abc'));
            options2.add(new SelectOption('def','def'));
            options2.add(new SelectOption('sss','sss'));
            return options2;
        }
    

}

 
Best Answer chosen by Gayathri Adoni04
Keyur  ModiKeyur Modi
Hi,
change the code as per the below code ,
<apex:page controller="testSq1">
 <Apex:form >
   <apex:pageBlock title="Welcome to MOvie Selection Process">
   
   <!--   For Selecting Movie and Play        -->
      <apex:selectRadio value="{!s}" rendered="true">
      
        <apex:selectOptions value="{!items}"/>
        <apex:actionSupport event="onchange" reRender="picklistId"/>
      </apex:selectRadio><p/>
         
           
           <!-- for dropdown list -->
           <apex:outputPanel id="picklistId">
           <apex:outputPanel rendered="{!s=='Movies'}">
            <apex:selectList size="1" value="{!SelectedMovie}" multiselect="false" rendered="{!newMovies!=null}" onclick="MovieSelection"> // In controller plz take one string varible with get,set named "selectedMovie' same for events
                <apex:selectOptions value="{!Movies1}"/>
                <apex:actionSupport event="onchange" reRender="in" action="{!MovieSelection}"/>
            </apex:selectList>
            </apex:outputPanel>
        
        <apex:outputPanel rendered="{!s=='Events'}">
         <apex:selectList size="1" value="{!selectedEvent}" multiselect="false" rendered="{!newEvents!=null}">
            <apex:selectOptions value="{!Events1}"/>
        </apex:selectList>
        </apex:outputPanel>
        </apex:outputPanel>
        
        <!-- command button -->
        <apex:commandButton value="$$Click Me$$" action="{!Click}" rerender="out" status="status"/>
   </apex:pageBlock>
   <apex:outputpanel id="out">
              <apex:outputText >The selected option is "{!s}"</apex:outputText>
              <apex:outputPanel rendered="{!s=='Movies'}">
           <apex:outputText >The selected {!s} is {!SelectedMovie} </apex:outputText>
              </apex:outputPanel>
              <apex:outputPanel rendered="{!s=='Events'}">
           <apex:outputText >The selected {!s} is "{!selectedEvent}" </apex:outputText>
              </apex:outputPanel>
  </apex:outputpanel>
   
   
  </Apex:form>
</apex:page>

please let me know if you need more description on it.

Thanks,
Keyur Modi

All Answers

Keyur  ModiKeyur Modi
Hi,

Change your page code as per below code,
 
<!--   For Selecting Movie and Play        -->
      <apex:selectRadio value="{!s}" rendered="true">
      
        <apex:selectOptions value="{!items}"/>
        <apex:actionSupport event="onchange" reRender="picklistId"/>
      </apex:selectRadio><p/>
         
           
           <!-- for dropdown list -->
           <apex:outputPanel id="picklistId">
           <apex:outputPanel rendered="{!s=='Movies'}">
            <apex:selectList size="1" value="{!newmovies}" multiselect="false" rendered="{!newMovies!=null}" onclick="MovieSelection">
                <apex:selectOptions value="{!Movies1}"/>
                <apex:actionSupport event="onchange" reRender="in" action="{!MovieSelection}"/>
            </apex:selectList>
            </apex:outputPanel>
        
        <apex:outputPanel rendered="{!s=='Events'}">
         <apex:selectList size="1" value="{!newEvents}" multiselect="false" rendered="{!newEvents!=null}">
            <apex:selectOptions value="{!Events1}"/>
        </apex:selectList>
        </apex:outputPanel>
        </apex:outputPanel>

Please let me know if this will help you.

Thanks,
Keyur Modi
Gayathri Adoni04Gayathri Adoni04
Thank you keyur...it worked for me..:)But for command button i want to display selected movie i tried to display but i couldn display the selected movie if you know how to do that thing please share it
Keyur  ModiKeyur Modi
Hi,
change the code as per the below code ,
<apex:page controller="testSq1">
 <Apex:form >
   <apex:pageBlock title="Welcome to MOvie Selection Process">
   
   <!--   For Selecting Movie and Play        -->
      <apex:selectRadio value="{!s}" rendered="true">
      
        <apex:selectOptions value="{!items}"/>
        <apex:actionSupport event="onchange" reRender="picklistId"/>
      </apex:selectRadio><p/>
         
           
           <!-- for dropdown list -->
           <apex:outputPanel id="picklistId">
           <apex:outputPanel rendered="{!s=='Movies'}">
            <apex:selectList size="1" value="{!SelectedMovie}" multiselect="false" rendered="{!newMovies!=null}" onclick="MovieSelection"> // In controller plz take one string varible with get,set named "selectedMovie' same for events
                <apex:selectOptions value="{!Movies1}"/>
                <apex:actionSupport event="onchange" reRender="in" action="{!MovieSelection}"/>
            </apex:selectList>
            </apex:outputPanel>
        
        <apex:outputPanel rendered="{!s=='Events'}">
         <apex:selectList size="1" value="{!selectedEvent}" multiselect="false" rendered="{!newEvents!=null}">
            <apex:selectOptions value="{!Events1}"/>
        </apex:selectList>
        </apex:outputPanel>
        </apex:outputPanel>
        
        <!-- command button -->
        <apex:commandButton value="$$Click Me$$" action="{!Click}" rerender="out" status="status"/>
   </apex:pageBlock>
   <apex:outputpanel id="out">
              <apex:outputText >The selected option is "{!s}"</apex:outputText>
              <apex:outputPanel rendered="{!s=='Movies'}">
           <apex:outputText >The selected {!s} is {!SelectedMovie} </apex:outputText>
              </apex:outputPanel>
              <apex:outputPanel rendered="{!s=='Events'}">
           <apex:outputText >The selected {!s} is "{!selectedEvent}" </apex:outputText>
              </apex:outputPanel>
  </apex:outputpanel>
   
   
  </Apex:form>
</apex:page>

please let me know if you need more description on it.

Thanks,
Keyur Modi
This was selected as the best answer
Gayathri Adoni04Gayathri Adoni04
Super..Thanks alot for ur answer Keyur.Its working as required.
Andrew Matt 8Andrew Matt 8
Thanks Keyur, Indeed it worked! this helped me to make some changes on my showbox app (https://showbox.fun). As showbox is app for Streaming movies & videos. This helped me.
Mary Jane 12Mary Jane 12
Download ShowBox APK (https://wallinsider.com/download-the-latest-showbox-apk/) for free and enjoy all premium features.