Hide inputField on radio button selection in Visual Force Pages

Question

I have an input field and two radio buttons.

I want to hide input field on radio button's click.

Can anybody help me out?

Answer 1

A very standard way to do it

Visual Force Page

apex:page standardController="contact" extensions="radioActionPageCtrl">

<apex:form >

  <apex:selectRadio id="valSelector" value="{!optSelected}">
   <apex:SelectOptions value="{!radioValues}"/>
   <apex:actionSupport event="onchange" reRender="cpBlock" status="validationStatus"/>
  </apex:selectRadio>

  <apex:actionStatus id="validationStatus">
   <apex:facet name="start">Evaluating...</apex:facet>
   <apex:facet name="stop">Ready to Evaluate</apex:facet>
  </apex:actionStatus>

  <apex:PageBlock Title="Contact Page" id="cpBlock">
    <apex:pageBlockSection title="Details">
     <apex:PageBlockSectionItem rendered="{!renderName}">
       <apex:outputText value="First Name" />
       <apex:inputField value="{!contact.firstName}" id="cName"/>
     </apex:PageBlockSectionItem>
    </apex:pageBlockSection>
  </apex:PageBlock>


</apex:form>

/apex:page>

Controller

public class radioActionPageCtrl {

public Boolean renderName {
    get{
        return optSelected == 'Option1';
    }
}
public String optSelected {get;set;}
public List<SelectOption> radioValues {
    get {
        List<SelectOption> resList = new List<SelectOption>();
        resList.add(new SelectOption('Option1', 'Option1'));
        resList.add(new SelectOption('Option2', 'Option2'));
        return resList;
    }
}

public radioActionPageCtrl(ApexPages.StandardController controller) {
    optSelected  = 'Option1';
}

}