Visualforce : Javascript Alert Not Displaying Controller Value

Question

Objective : To display the chosen the picklist value as javascript alert when the button is clicked

This is my VF Page

What actually happens

1. After page load when I click on "Go" it just shows an empty popup like this.

2. After choosing a type from the picklist when I click on the button the page simply refreshes.

This is my controller code

public with sharing class GatewayController {

public String chosen_type{get;set;}
public String test_value{get;set;}

    public GatewayController(ApexPages.StandardController controller) {


    }

    public List<SelectOption> getTypes()
    {

    Schema.DescribeFieldResult fieldResult = Aus_Expense__c.Type__c.getDescribe();
    List<Schema.PickListEntry> ple = fieldResult.getPickListValues();
    List<SelectOption> options = new List<SelectOption>();

    test_value = 'This is a test';

    for(Schema.PickListEntry s : ple)
    {
        options.add(new SelectOption(s.getLabel(),s.getValue()));

    }
    return options;
    }

}

VF Page Tag

<apex:page standardController="Aus_Expense__c" extensions="GatewayController" >

<apex:form >
<apex:pageblock >
<apex:pageBlockButtons >
<apex:commandButton value="GO" onclick="alert({!chosen_type});"/>
</apex:pageBlockButtons>
<apex:outputLabel >Choose a type : </apex:outputLabel>
<apex:selectList size="1" id="types_id" value="{!chosen_type}">
<apex:selectOptions value="{!types}" />
</apex:selectList>
</apex:pageblock>
<apex:pageblock >

<p/>
<apex:outputText >Start Date :</apex:outputText>
<p/>
<apex:outputtext >End Date : </apex:outputText>
<p/>
<apex:outputtext >Type : </apex:outputtext>
<p/>
<apex:outputtext > Begin Amount : </apex:outputtext>
<p/>
<apex:outputtext > End Amount : </apex:outputtext>
</apex:pageblock>
</apex:form>
</apex:page>

Question :

My understanding is that the chosen value from the apex:selectlist will be stored in the controller property {!chosen_type}.

Is this not right ?.

Can someone explain why my javascript alert (on button click) does not show the chosen picklist value ?

Answer 1

The value is available from the controller, but at the time at which you're calling the alert, the button doesn't yet know about the newly selected value; it only knows about the value since the last time the page was loaded. To get the value from the controller, you have to wait until the page has been redrawn. Given your current framework, the easiest way to change this would be to change onclick to oncomplete, and then rerender the form instead of doing a complete reload:

<apex:form id="form">
...
    <apex:commandButton value="GO"
        oncomplete="alert('{!JSINHTMLENCODE(chosen_type)}');"
        reRender="form" />

This requires a complete round-trip to the server. Of course, you could instead use your favorite JavaScript method (e.g. jQuery) to pull up the selected value from the select list if you wanted to, which avoids the need for a round trip.

---

Demo

Controller

public class chosenValueController {
    public String chosenValue { get; set; }
    public SelectOption[] getOptions() {
        SelectOption[] results = new SelectOption[0];
        for(String value: 'Option 1;Option 2;Option 3'.split(';')) {
            results.add(new SelectOption(value, value));
        }
        return results;
    }
}

Page

<apex:page controller="chosenValueController">
    <apex:form id="form">
        <apex:selectList value="{!chosenValue}" size="1">
            <apex:selectOptions value="{!options}" />
        </apex:selectList>
        <br />
        <apex:commandButton value="Go" oncomplete="alert('{!JSINHTMLENCODE(chosenValue)}')" reRender="form"/>
    </apex:form>
</apex:page>