+ Start a Discussion
gilbert8109gilbert8109 

render conditional fields in an HTML table

Hi!

 

I have a VF page that is basically oen big HTML table (everythign is within this: <table></table).  There are about 22 rows, and 2 columns.  The first row has simple text indicating the question, and the last column contains inputfields where people will put in their responses to the questions.  Pretty simple.

 

All of the questions have one standard input field response that is required: a picklist that has Yes and No as the options.  What I need to do, is set up the VF code so that, if a user chooses "Yes", then several additional input fields, which are dependent on the "Yes" selection, appear.

 

For example, the first row has Question 1.  The user can select Yes or No in the inputfield.  What needs to happen when that person selects Yes is for an action to take place in VF that renders, say, 4 other inputfields, on the screen immediately below that first input field.  In other words, that dependent field is rendered ONLY when Yes is selected.

 

I believe the solution has to do with using the actionsupport component but I can't get it to work.

 

Here is a sample of the code from my table...

 

<table>

<tr>

<td>

Question 1

</td>

<td>

<apex:inputfield value="{!Form_F__c.Grntee_cllct_data_on_Acnt_Hldr_Gender__c}"/> ***This is the Yes No picklist field***

<apex:outputtext value="# Male: " />
<apex:inputfield value="{!Form_F__c.Male_AFI_IDA_Accnt_Hldrs__c}" />

</td> 

</tr>

</table>

 

Now, what I think I need is to use an outputpanel and action support that rerenders the page.  I only want that second input field (Male_AFI_IDA_Accnt_Hldrs__c) to render immediately on the page if Yes is selected in Grntee_cllct_data_on_Acnt_Hldr_Gender__c. 

 

Any ideas?

 

Thanks!

Ispita_NavatarIspita_Navatar

Your  requirement can be easily implemented using conditionally visible DIV , setting visbility of the DIV to true or false. This can be achieved easily using javascript.

Please refer to the code below for clarity:-

html>
<head>
    <title>Javascript Show Hide Div Visibility</title>
   
   <style type="text/css">
    .divStyle {
    width:200px;
    height:100px;
    margin:0px auto;
    }
    </style>
  
    <script language="javascript" type="text/javascript">
    function showHideDiv()
    {
        var divstyle = new String();
        divstyle = document.getElementById("div1").style.visibility;
        if(divstyle.toLowerCase()=="visible" || divstyle == "")
        {
            document.getElementById("div1").style.visibility = "hidden";
        }
        else
        {
            document.getElementById("div1").style.visibility = "visible";
        }
    }
    </script>  
</head>

<body>

    <div id="div1" class="divStyle">
        Show Hide Div visibility using Javascript DOM.
    </div>
   
    <center>
        <input type="button" value="show hide div" onclick="showHideDiv()" />
    </center>
   
</body>
</html>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved