Hide and Show inputField Based upon Radio Button

Question

I have a small problem with a validation here

  <script>
    function myFunction(V) {
        var inputcpf = document.getElementById("CPF");
        var inputcnpj = document.getElementById("CNPJ");

        if(V.Value =='CPF'){
            inputcpf.style.display='block';
            inputcpf.required=True;
            inputcnpj.style.display='none';
            inputcnpj.removeattribute("required");
        }else{
            inputcnpj.style.display='block';
            inputcnpj.required=True;
            inputcpf.style.display='none';
            inputcpf.removeattribute("required");                

        }

    }    

    </script>

---

<apex:selectRadio styleClass="radioinput" onChange="myFunction(this);">
                        <apex:selectOption itemlabel="CPF" itemValue="CPF" />   
                        <apex:selectOption itemlabel="CNPJ" itemValue="CNPJ"/> 
                    </apex:selectRadio>     

                <td><apex:inputField style="display:none" id="CPF" value="{!Cliente__c.CPF__c}"/></td>                    
                <td><apex:inputField style="display:none" id="CNPJ" value="{!Cliente__c.CNPJ__c}"/></td>   

I want, when I click on cpf, hide cnpj and remove the true request, and the reverse as well. But the function is not working :(

Answer 1

JavaScript simply isn't going to work here. Even if you got as far as showing/hiding the fields, the net result would be that you'd get errors when interacting with the controller.

However, while we're on that topic, your JS has two main problems. First, ID values on apex namespace components are "mangled" by the system, so you need to use $Component variable, and second, JavaScript is cAsE-sEnSiTiVe, so it would have been V.value, not V.Value.

The Visualforce way of doing this would be to use apex:actionSupport:

<apex:actionRegion>
  <apex:selectRadio styleClass="radioinput" value="{!typeSelection}">
    <apex:selectOption itemlabel="CPF" itemValue="CPF" />
    <apex:selectOption itemlabel="CNPJ" itemValue="CNPJ"/>
    <apex:actionSupport event="onchange" reRender="CPF,CNPJ" />
  </apex:selectRadio>
</apex:actionRegion>
<apex:outputText rendered="{!typeSelection='CPF'}" id="CPF">
  <td><apex:inputField required="true" value="{!Cliente__c.CPF__c}"/></td>                    
</apex:outputText>
<apex:outputText rendered="{!typeSelection='CPNJ'}" id="CNPJ">
  <td><apex:inputField required="true" value="{!Cliente__c.CNPJ__c}"/></td>  
</apex:outputText>

Additional tweaks may be necessary, but this should get you started.