1

The javascript should be checking to see if the user didn't select anything in a select list if the value is the first option which is "Please choose a seminar". It appears to just ignore the script.

<apex:page controller="vfCnt_chooseSeminar" >

<apex:form > 

<apex:PageBlock title="Choose Your Preferred Seminar(s) for {!progName}">

            <apex:pageBlockButtons >
                <apex:commandButton action="{!saveItem}" value="Next"/>
                <apex:commandButton onclick="validateFunction('{!$Component.first}')" action="{!cancelAction}" value="Cancel"/>
            </apex:pageBlockButtons>

            <h1>First Preference:</h1><p />
                   <apex:selectList id="first" value="{!semName1}" multiselect="false" size="1">
                   <apex:selectOptions value="{!items}"/>
                   </apex:selectList>
            <p />
                    <h1>Second Preference:</h1><p />
                   <apex:selectList id="second" value="{!semName2}" multiselect="false" size="1">
                   <apex:selectOptions value="{!items}"/>
                   </apex:selectList>
             <p />
                    <h1>Third Preference:</h1><p />
                   <apex:selectList id="third" value="{!semName3}" multiselect="false" size="1">
                   <apex:selectOptions value="{!items}"/>
                   </apex:selectList>
</apex:PageBlock>
      </apex:form>

     <!-- Java script starts Here -->
  <script>
   function validateFunction(first){
       var inputAmount = document.getElementById(first).value;
         if(inputAmount == 'Please Choose a Seminar'){
            alert('Please enter seminar1');
         } 
  }
  </script> 
 <!-- java script ends here -->  

</apex:page>
Improve this question
3
  • or may be your VF component inside other component that why you are not able to access check the doc for nested component developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/…
    – Ratan Paul
    Apr 7, 2016 at 9:23
  • I pasted the <script> inside the apex:form tag and tried it, no go. I then put it inside the apex:pageblock. Still nothing. Any other suggestions? If the first option is 'Please Choose a Seminar' do I use inputAmount == 'Please Choose a Seminar' or inputAmount == Null because they never chose anything?
    – Apex N-u-b
    Apr 7, 2016 at 9:24
  • Apex N-u-b.... check Sergey Utko's Answer that will help you. same mentioned here as well Get selected value in dropdown list using JavaScript
    – Ratan Paul
    Apr 7, 2016 at 9:26

1 Answer 1

Reset to default
1

You can not just access the selected value using .value notation of the object. You have to access the options first and then get the selected option like this:

var inputAmount = document.getElementById(first).value;
var val = inputAmount.options[inputAmount.selectedIndex].value;
Improve this answer
8
  • I added your fix and then I added an alert ("Hi") in function validateFunction. It doesn't seem like the function is being called. How to get it to run? I have a feeling that then your fix will make it work.
    – Apex N-u-b
    Apr 7, 2016 at 9:33
  • @ApexN-u-b I think your function is being called, but you should to check the {!$Component.first} parameter. You are trying to access the first element before it was initialized in visualforce code (the button is rendered before the firstelement and is trying to access the first elements ID, that is actually not exists for that point of time). I would try to place the button after the first element and try the function again.
    – Sergej Utko
    Apr 7, 2016 at 9:39
  • I tried it. Still no sign of life. Right now if I can only get the alert to show Hi that would convince me that it's running. Do I need to include something like jquery files or something?
    – Apex N-u-b
    Apr 7, 2016 at 10:26
  • @ApexN-u-b Ok I think I know what the problem is. In the commandButton code you have no rerender attribute. Without it after click on the button the page will be reloaded. That is the problem. Add a rerender attribute and it will work: <apex:commandButton onclick="validateFunction('{!$Component.first}')" action="{!cancelAction}" value="Cancel" reRender="none"/> Alternatively you can add return false; to the onclick: onclick="validateFunction('{!$Component.first}'); return false;"
    – Sergej Utko
    Apr 7, 2016 at 10:34
  • Neither works (added both). FYI, the page redirects to another vf page after an update. But why should this matter, shouldn't the script run before anything is done so it can cancel further actions if the logic dictates?
    – Apex N-u-b
    Apr 7, 2016 at 11:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .