+ Start a Discussion
RustyboyRustyboy 

select list warning based on option selected

I have a SelectList which contains a list of user actions (replaces the need for multiple buttons). I have successfully implemented AcionSupport to invoke an Apex call, but I want to issue a "confirm" dialog on 2 of the actions in the list. My JS skills are very primitive, so I suspect this is not really a difficult task.

Here is my VF code excerpt:

<apex:selectList id="nextAction" value="{!nextAction}" size="1" 
Title="Select the next action">
<apex:selectOptions value="{!nextActionList}"></apex:selectOptions>                        
<apex:actionSupport event="onchange" action="{!doNextAction}" /> 
</apex:selectList>


I want to put an "onchange" event on the selectList which passes the selected option to a JS script which checks the action and optionally displays a confirm warning.

Any help greatly appreciated

 
Best Answer chosen by Rustyboy
MJ Kahn / OpFocusMJ Kahn / OpFocus
Here's a sample that you can adapt to your own purposes:
 
<apex:page standardController="Account">
    <apex:form >
        <apex:selectList value="{!Account.Type}" size="1" onChange="typeChanged(this);" >
            <apex:selectOption itemvalue="test1" itemlabel="test1" />
            <apex:selectOption itemvalue="test2" itemlabel="test2" />
            <apex:selectOption itemvalue="test3" itemlabel="test3" />
        </apex:selectList>
        <apex:actionFunction name="doSave" action="{!save}" />
    </apex:form>    
    <script language="JavaScript">
        function typeChanged(elem) {
            if (elem.value == 'test2') {
                alert('value is test2 - saving');
                doSave();
            }
        }
    </script>
</apex:page>
Note that it doesn't do an action:support. Instead, we define an actionFunction, which (behind the scenes) creates a JavaScript function named doSave() which, when called, invokes the controller's save() action.

The onChange attribute on the selectList defines a JavaScript function that gets called when the user changes the selectList's value. The function checks the new value, and decides whether to call doSave()

Is that close enough to what you're looking to do?
 

All Answers

MJ Kahn / OpFocusMJ Kahn / OpFocus
Here's a sample that you can adapt to your own purposes:
 
<apex:page standardController="Account">
    <apex:form >
        <apex:selectList value="{!Account.Type}" size="1" onChange="typeChanged(this);" >
            <apex:selectOption itemvalue="test1" itemlabel="test1" />
            <apex:selectOption itemvalue="test2" itemlabel="test2" />
            <apex:selectOption itemvalue="test3" itemlabel="test3" />
        </apex:selectList>
        <apex:actionFunction name="doSave" action="{!save}" />
    </apex:form>    
    <script language="JavaScript">
        function typeChanged(elem) {
            if (elem.value == 'test2') {
                alert('value is test2 - saving');
                doSave();
            }
        }
    </script>
</apex:page>
Note that it doesn't do an action:support. Instead, we define an actionFunction, which (behind the scenes) creates a JavaScript function named doSave() which, when called, invokes the controller's save() action.

The onChange attribute on the selectList defines a JavaScript function that gets called when the user changes the selectList's value. The function checks the new value, and decides whether to call doSave()

Is that close enough to what you're looking to do?
 
This was selected as the best answer
RustyboyRustyboy
That's the perfect solution, thanks