function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Bablu Kumar PanditBablu Kumar Pandit 

make a text box appear on selection of a Radio Button in vf page

i tried to control using java script but not work please guide me
Below see my code 
<apex:selectRadio value="{!Ques1}" layout="pageDirection" id="Ques1" onchange="check(this)">
                                    <apex:selectOption itemLabel="Extremely Satisfied" itemValue="Extremely Satisfied"/>
                                    <apex:selectOption itemLabel="Very Satisfied" itemValue="Very Satisfied"/>
                                    <apex:selectOption itemLabel="Neither satisfied nor dissatisfied" itemValue="Neither satisfied nor dissatisfied"/> 
                                    <apex:selectOption itemLabel="Somewhat dissatisfied" itemValue="Somewhat dissatisfied"/> 
                                    <apex:selectOption itemLabel="Very dissatisfied" itemValue="Very dissatisfied"/> 
                                </apex:selectRadio> 

-------JavaScript-----
 <script type="text/javascript">
                function check(Selected){
				var choice = Selected.value;
                    if(choice == "Neither satisfied nor dissatisfied" || choice == "Somewhat dissatisfied" || choice == "Very dissatisfied" ){
                        //alert('if');
                        document.getElementsById("msg")[0].style.display = "block"
                    }else{
                        //alert('else');
                        document.getElementsById"msg")[0].style.display = "none"
                    }
                }
            </script>
AnudeepAnudeep (Salesforce Developers) 
Here are some examples that you can try

<apex:inputField> example

VF Page
  
<apex:page standardController="contact" extensions="radioActionCtrl"  >
    <apex:form >
        <apex:selectRadio >
            <apex:actionSupport event="onchange" action="{!changeInputState}" rerender="opPanelName"/>
            <apex:selectOption itemValue="" itemlabel="Option1"/>
        </apex:selectRadio>       
        <apex:outputPanel id="opPanelName">
            <apex:inputField value="{!contact.firstName}" id="NameInput" required="false"/>
            <script>
                document.getElementById('{!$Component.NameInput}').disabled = {!disableInput};
            </script>
        </apex:outputPanel>            
    </apex:form>
</apex:page>

Controller Extension
  
public class radioActionCtrl {
    public Boolean disableInput {get; set;}
    public radioActionCtrl(ApexPages.StandardController controller) {
        disableInput = true;
    }    
    public void changeInputState(){
        disableInput = false;
    }
}

<apex:inputText> example
  
<apex:page controller="dynSelect">
    <apex:form id="form">
        <apex:selectRadio value="{!selectedOption}">
            <apex:actionSupport event="onchange" rerender="form" />
            <apex:selectOption itemValue="Yes" itemLabel="Yes" />
            <apex:selectOption itemValue="No" itemLabel="No" />
        </apex:selectRadio>
        <apex:inputText rendered="{!selectedOption='Yes'}" />
    </apex:form>
</apex:page>

You can do this with jquery as well. Try it yourself

If you find this information helpful, please mark this answer as Best. It may help others in the community. Thank You!

Anudeep