So I have a picklist which selects a type of reward this then should render certain input fields depending on which you option you select on the reward picklist. I got it to work with divs in HTML but I cant get it to work in apex code
Code:
<apex:pageBlockSection title="Reward Information">
<apex:inputField id="reward" value="{!game.Reward_Type__c}" onchange="checkRewardType()" />
<apex:inputField id="cash" value="{!game.cash_amount__c}" rendered="false"/>
<apex:inputField id="card_type" value="{!game.Card_Type__c}" rendered="false"/>
<apex:inputField id="card_amount" value="{!game.Card_Amount__c}" rendered="false"/>
<apex:inputField id="points" value="{!game.Point_Amount__c}" rendered="false"/>
<apex:inputField id="custom" value="{!game.Custom__c}" rendered="false"/>
</apex:pageBlockSection>
<script>
function checkRewardType(){
type = document.getElementById("reward");
if(type.value== "Cash"){
document.getElementById("cash").setAttribute("rendered","true");
document.getElementById("card_type").setAttribute("rendered","false");
document.getElementById("card_amount").setAttribute("rendered","false");
document.getElementById("points").setAttribute("rendered","false");
document.getElementById("custom").setAttribute("rendered","false");
}
else if(type.value == "giftcard"){
document.getElementById("cash").setAttribute("rendered","false");
document.getElementById("card_type").setAttribute("rendered","true");
document.getElementById("card_amount").setAttribute("rendered","true");
document.getElementById("points").setAttribute("rendered","false");
document.getElementById("custom").setAttribute("rendered","false");
}
else if(type.value == "points"){
document.getElementById("cash").setAttribute("rendered","false");
document.getElementById("card_type").setAttribute("rendered","false");
document.getElementById("card_amount").setAttribute("rendered","false");
document.getElementById("points").setAttribute("rendered","true");
document.getElementById("custom").setAttribute("rendered","false");
}
else if(type.value == "custom"){
document.getElementById("cash").setAttribute("rendered","false");
document.getElementById("card_type").setAttribute("rendered","false");
document.getElementById("card_amount").setAttribute("rendered","false");
document.getElementById("points").setAttribute("rendered","false");
document.getElementById("custom").setAttribute("rendered","true");
}
else{
document.getElementById("cash").setAttribute("rendered","false");
document.getElementById("card_type").setAttribute("rendered","false");
document.getElementById("card_amount").setAttribute("rendered","false");
document.getElementById("points").setAttribute("rendered","false");
document.getElementById("custom").setAttribute("rendered","false");
}
}
</script>
Best Answer
You can't set the
rendered
tag from Javascript, the tag is part of the Visualforce page.The easiest way to do this would be with a Javascript library like jQuery and than use a selector, and apply a method call like:
Tip: When using Visualforce, the selectors that are ultimately rendered in HTML are not that easy to find with jQuery. So use a regex to find the element from the dynamically applied
Id
tags once the page is rendered:Where
txtTitle
is theid
attribute you assigned to an element in Visualforce like so:In this case it would be