function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
pupilstuffpupilstuff 

Java Script with output panel

Hello,

 

I just want to show or hide the output panel "flight" on chaging the value of drop dwon box .

 

my code is

 

<apex:page showHeader="false" standardController="travel_booking__c" extensions="travel">
<html><br></br><br></br>
<head> <b><big><center> <font face="Times New Roman" size="+3" color="#ff0000">Capgemini Travel Desk</font></center></big></b></head>
<br></br><br></br>
<apex:form id="f1" rendered="true">
 <apex:pageBlock id="block" >
  <apex:pageBlockSection title="Login" id="pageblock" >

     <apex:outputtext value="Corp ID"/>
   
     <apex:outputtext value="Name"/>
   
   <apex:outputtext value="Project Name"/>
   
     <apex:outputtext value="Manager"/>
  
      <apex:inputField id="piclist" value="{!travel_booking__c.Travel_type__c}"  onchange="changevalue(document.getElementById('{!$Component.piclist}'));" />
  <br></br>
  <apex:outputText value="*This site is powered by Megha Travel agency"/>
  <br></br>
 
  <apex:outputPanel id="flight" rendered="false">
  <apex:outputText value="From Country" />
     <apex:inputField value="{!travel_booking__c.Fromcountry__c}"/>
      <apex:outputText value="To Country" />
     <apex:inputField value="{!travel_booking__c.To_Country__c}"/>
    </apex:outputPanel>
   
<apex:outputPanel layout="block" id="train" rendered="false"> 
<apex:outputText id="test" value="From City" />
     <apex:inputField value="{!travel_booking__c.From_City__c}"/>
      <apex:outputText value="To City" />
     <apex:inputField value="{!travel_booking__c.To_City__c}"/>
    </apex:outputPanel>
 
 
  </apex:pageBlockSection>

  <script type="text/javascript">
       
        function changevalue(txt)
        {
    
             if(txt.value=="Flight     (International)")
             {
                   
                 document.getElementById('{!$Component.block.pageblock.flight}').innerHTML.style.visibility ='visible';

             }
                           
        }  
</script>


 </apex:pageBlock>
 
 
</apex:form>
</html>
</apex:page>

 

Moreover plz tell me how to implement this with actionfunction

Best Answer chosen by Admin (Salesforce Developers) 
joshbirkjoshbirk

ActionFunction version:

 

Page

<apex:page showHeader="false" StandardController="Account" extensions="MyExtensions">
<apex:form id="myform">
	
	<apex:actionFunction action="{!controlPanel}" name="controlPanel" rerender="mypanel" >
		<apex:param name="inputValue" assignTo="{!inputValue}" value="" />
	</apex:actionFunction>
	
	<apex:inputField id="type" value="{!Account.Type}" onchange="controlPanel(document.getElementById('{!$Component.type}').options[document.getElementById('{!$Component.type}').selectedIndex].value);" />
	
	<apex:outputPanel id="mypanel" layout="block" >
		<apex:outputPanel rendered="{!showPanel}" ><apex:outputText value="{!inputValue}" />? {!showPanel}</apex:outputPanel>
	</apex:outputPanel>
</apex:form>
  
</apex:page>

 

Extension:

public with sharing class MyExtension {

	public Boolean showPanel {get; set;}
	public String inputValue {get; set;}
	
	public MyExtension(ApexPages.StandardController controller) {
		inputValue = '';
		showPanel = true;
		}

	public PageReference controlPanel() {
		showPanel = true;
		if(inputValue == 'Customer - Channel') {
			showPanel = false;
		}
		return null;
	}

	
}

 

HTH

All Answers

joshbirkjoshbirk

Sorry, to clarify - are you looking to replace that code with just ActionFunction functionality or is that code not working as expected?
pupilstuffpupilstuff

Actually I am looking for both the things

 

1.how to use Action function instead of using my code

2.My this code is also not working
joshbirkjoshbirk

OK, here's a working example of doing this with JavaScript.

 

<apex:page showHeader="false" StandardController="Account">
<script>
	function changevalue(input) {
		value = input.options[input.selectedIndex].value;
		if(value == 'Customer - Channel') {
			document.getElementById('{!$Component.myform.mypanel}').style.display = 'none';
		} else {
			document.getElementById('{!$Component.myform.mypanel}').style.display = 'block';
		}
	}
</script>
<apex:form id="myform">
	<apex:inputField id="type" value="{!Account.Type}" onchange="changevalue(document.getElementById('{!$Component.type}'));" />
	<apex:outputPanel id="mypanel" layout="block">
		Hello World
	</apex:outputPanel>
</apex:form>
  
</apex:page>

 

Will post an actionFunction version as well.
joshbirkjoshbirk

ActionFunction version:

 

Page

<apex:page showHeader="false" StandardController="Account" extensions="MyExtensions">
<apex:form id="myform">
	
	<apex:actionFunction action="{!controlPanel}" name="controlPanel" rerender="mypanel" >
		<apex:param name="inputValue" assignTo="{!inputValue}" value="" />
	</apex:actionFunction>
	
	<apex:inputField id="type" value="{!Account.Type}" onchange="controlPanel(document.getElementById('{!$Component.type}').options[document.getElementById('{!$Component.type}').selectedIndex].value);" />
	
	<apex:outputPanel id="mypanel" layout="block" >
		<apex:outputPanel rendered="{!showPanel}" ><apex:outputText value="{!inputValue}" />? {!showPanel}</apex:outputPanel>
	</apex:outputPanel>
</apex:form>
  
</apex:page>

 

Extension:

public with sharing class MyExtension {

	public Boolean showPanel {get; set;}
	public String inputValue {get; set;}
	
	public MyExtension(ApexPages.StandardController controller) {
		inputValue = '';
		showPanel = true;
		}

	public PageReference controlPanel() {
		showPanel = true;
		if(inputValue == 'Customer - Channel') {
			showPanel = false;
		}
		return null;
	}

	
}

 

HTH

This was selected as the best answer
pupilstuffpupilstuff

Thanks , for your support ..now I come to know what mistake I was doing