function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
adrisseladrissel 

Can't send selectList value to controller via Javascript?

Hey all, I need to pass the set value of one of my selectList options back to a specific method in my controller.  It isn't working and I can't find out why.  Can someone glance at the code below and tell me what I'm missing here?

Controller
public class LogACaseController{

    public Boolean aso {get;set;}
    public Boolean cd {get;set;}
    public Boolean ss {get;set;}
    private Id userId {get;set;}
    public String baseUrl {get;set;}
    public String selection {get;set;}
    public List<String> products = new List<String>();    
        
    /*
     * Get ContactId of logged-in User
     */
    
    public PageReference getUserInfo(){   
    
        userId = UserInfo.getUserId();
        getPermSets(userId);
        getBaseUrl();
        return null;
    }
    
    /*
     * Get permission sets of logged-in User
     */
    
    public void getPermSets(Id userId){
    
        Id asoPsId = [SELECT Id FROM PermissionSet WHERE Name = 'ASO_Community' LIMIT 1].Id;
        Id ssPsId = [SELECT Id FROM PermissionSet WHERE Name = 'SS_Community' LIMIT 1].Id;
        Id cdPsId = [SELECT Id FROM PermissionSet WHERE Name = 'CD_Community' LIMIT 1].Id;
        List<PermissionSetAssignment> asoAssigneeIds = new List<PermissionSetAssignment>([SELECT AssigneeId FROM PermissionSetAssignment WHERE PermissionSetId =: asoPsId]);
        List<PermissionSetAssignment> ssAssigneeIds = new List<PermissionSetAssignment>([SELECT AssigneeId FROM PermissionSetAssignment WHERE PermissionSetId =: ssPsId]);
        List<PermissionSetAssignment> cdAssigneeIds = new List<PermissionSetAssignment>([SELECT AssigneeId FROM PermissionSetAssignment WHERE PermissionSetId =: cdPsId]);
        
        for(PermissionSetAssignment asoId : asoAssigneeIds){
        
            if(asoId.AssigneeId == userId){
            
                aso = true;
            }
        }  
         
        for(PermissionSetAssignment ssId : ssAssigneeIds){
        
            if(ssId.AssigneeId == userId){
            
                ss = true;
            }
        }   
        
        for(PermissionSetAssignment cdId : cdAssigneeIds){
        
            if(cdId.AssigneeId == userId){
            
                cd = true;
            }
        }   
    }
    
    /*
     * Get product options
     */
            
    public List<SelectOption> getOptions(){
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('none','--None--'));
        options.add(new SelectOption('aso','Advanced Sourcing Optimizer'));
        options.add(new SelectOption('cd','Contract Director'));
        options.add(new SelectOption('ss','eProcurement/SelectSite'));
        return options;
    }
        
    public List<String> getProducts() {
        return products;
    }
    
    public void setProducts(List<String> products) {
        this.products = products;
    }
    
    /*
     * Get pagereference based on user product selection
     */
     
    public PageReference getCasePage(){
     
        PageReference pr;         
        RecordType asoRt = [SELECT Id FROM RecordType WHERE DeveloperName = 'ASO' LIMIT 1];
        RecordType cdRt = [SELECT Id FROM RecordType WHERE DeveloperName = 'Contract_Director' LIMIT 1];
        RecordType ssRt = [SELECT Id FROM RecordType WHERE DeveloperName = 'SelectSite_Support' LIMIT 1];
         
        if(aso == true){
        
            pr = new PageReference(baseUrl+'/support/500/e?retURL=%2Fsupport%2F500%2Fo&RecordType='+asoRt.Id+'&ent=Case');
        }
         
        else if(cd == true){
        
            pr = new PageReference(baseUrl+'/support/500/e?retURL=%2Fsupport%2F500%2Fo&RecordType='+cdRt.Id+'&ent=Case');
        }
        
        else if(ss == true){
        
            pr = new PageReference(baseUrl+'/support/500/e?retURL=%2Fsupport%2F500%2Fo&RecordType='+ssRt.Id+'&ent=Case');
        }
        
        return pr;
    }
    
    /*
     * Get baseUrl
     */
     
     public String getBaseUrl(){
     
         baseUrl = Url.getSalesforceBaseUrl().toExternalForm();
         
         return baseUrl;
     }
}

VF Page
 
<apex:page controller="LogACaseController" tabStyle="Log_A_Case__tab" action="{!getUserInfo}">
  <head>
      <script>
          function getCasePage(){
              var selection = document.getElementById("{!$component.form.product}").value;
              alert(selection);
              getCasePageFunction(selection);
          }
      </script>
  </head>
  <body>
      <apex:form id="form">
          <apex:actionFunction action="{!getCasePage}" id="getCasePage" name="getCasePageFunction">
              <apex:param assignTo="{!selection}" id="selection" name="selection" value=""/>
          </apex:actionFunction>
          <br/><span style="font-size: 14px;font-weight: bold;">Select a product:</span>&nbsp;&nbsp;
          <apex:selectList id="product" value="{!products}" multiselect="false" size="1" onchange="return getCasePage();">
              <apex:selectOptions value="{!options}"></apex:selectOptions>
          </apex:selectList>
      </apex:form>
  </body>
</apex:page>

Thanks ahead of time!
Dushyant SonwarDushyant Sonwar
Hi adrissel,
use this
<apex:selectList id="product" value="{!products}" multiselect="false" size="1" onchange="getCasePageFunction('{!products}');return false;">
I don't think you need a script for that for passing value to controller.
Hope this helps.
adrisseladrissel
Thanks Dushyant.  Here is my VF page code now:
<apex:page controller="LogACaseController" tabStyle="Log_A_Case__tab" action="{!getUserInfo}">
    <head>
    </head>
    <body>
        <apex:form id="form">
            <apex:actionFunction action="{!getCasePage}" id="getCasePage" name="getCasePageFunction">
                <apex:param assignTo="{!selection}" id="selection" name="selection" value=""/>
            </apex:actionFunction>
            <br/><span style="font-size: 14px;font-weight: bold;">Select a product:</span>&nbsp;&nbsp;
            <apex:selectList id="product" value="{!products}" multiselect="false" size="1" onchange="getCasePageFunction('{!products}');return false;">
                <apex:selectOptions value="{!options}"></apex:selectOptions>
            </apex:selectList>
        </apex:form>
    </body>
</apex:page>
Am I correct in saying that the {!products} variable is still being mapped to the {!selection} variable in the controller?

Just to be clear here is what I'm wanting to happen...I want to select an option from the list and have the page redirect to the corresponding PageReference.  To test whether it is even getting to the getCasePage() method at all I have a system.debug statement in there.  When making a selection from the list the screen merely refreshes but there is no record of my debug statement in the logs and no indication that it is even going into the method at all.

What else am I missing?
 
Dushyant SonwarDushyant Sonwar
Hi adrissel,
change this line
public List<String> products = new List<String>(); 
to
public string products{get;set;}
and remove it's getter/setter methods from class
and now try to see your debug statement
this wil work.

 
adrisseladrissel
Thanks Dushyant.  I decided to just go with an HTML <select> list and use jQuery to style it.  That was my need in the end.  <option> tags in HTML can't be styled normally and I needed to be able to hide various values based on their appropriate controller settings.  Here is the final VF code for the benefit of other readers:
 
<apex:page controller="LogACaseController" tabStyle="Log_A_Case__tab" action="{!getUserInfo}">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>      
        $( document ).ready(function() {        
            if('{!aso}' != 'true'){
                $("#aso").css("display","none");
            }
            else{ 
                $("#aso").css("display","block");
            }
            if('{!cd}' != 'true'){
                $("#cd").css("display","none");
            }        
            else{
                $("#cd").css("display","block");
            }  
            if('{!ss}' != 'true'){
                $("#ss").css("display","none");
            }
            else{  
                $("#ss").css("display","block");
            }
        });
        function getCasePage(selection){
            getCasePageFunction(selection);
        }
        </script>
    </head>
    <body>
        <apex:form id="form">
            <apex:actionFunction action="{!getCasePage}" id="getCasePage" name="getCasePageFunction" rerender="form">
                <apex:param assignTo="{!selection}" id="selection" name="selection" value=""/>
            </apex:actionFunction>
            <br/><span style="font-size: 14px;font-weight: bold;">Select a product:</span>&nbsp;&nbsp;
            <select id="product" onchange="return getCasePage(this.value);">
                <option value="none">--None--</option>
                <option value="aso" id="aso">Advanced Sourcing Optimizer</option>
                <option value="cd" id="cd">Contract Director</option>
                <option value="ss" id="ss">SelectSite</option>
            </select>
        </apex:form>
    </body>
</apex:page>

 
Pankaj_GanwaniPankaj_Ganwani
Hi,

Please use return false; statement at the end of the getCasePage(selection) function.