[SalesForce] rendering input fields depending on other selection

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:

$('#myelement').show(); $('#myelement').hide();

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:

$("[id$='txtTitle']")

Where txtTitle is the id attribute you assigned to an element in Visualforce like so:

<apex:inputField id="reward" value="{!game.Reward_Type__c}"  onchange="checkRewardType()" />

In this case it would be

$("[id$='reward']").hide();
Related Topic