function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Get Id's of select radio in javascript. (Radio's are in repeat)

Hi Friends, 

I have a pressing issue i need to solve and need your help in doing so. The problem is : 

I have a visual force page which iterates over tab's and has different questions on each tab. The questions are answered via the radio buttons. Now i have radio buttons inside <apex:repeat>, and i need to get the values that they contain in my javascript so that i may make other radio buttons hidden or show up according to the value the said radio button has. 

The problem is that i cannot give a dynamic Id to the selectRadio inside <repeat> as it will only accept literals. So how can i access them? I tried getting the component via the styleclass attribute, but it returns me a html table element, which again i cant use to decide which option has been checked in the radio button list. I am posting the VF page snippet below, any help is greatly appreciated: 
<apex:form style="font-size: 11px;" >   
	<apex:pageBlock id="CrossSellBlock" title="Cross Sell for {!Opportunity.Opportunity__c}">
            <apex:pageMessages />
            <apex:pageBlockButtons style="font-size: 10px;" >
                <apex:commandButton value="Save" action="{!CSSave}"/>
                <apex:commandButton value="Complete" onclick="return confirm('Would you like to submit the Survey?');" action="{!CSSubmit}"/>
                <apex:commandButton value="Reset" onclick="return confirm('Are you sure you want to reset this Survey?');" action="{!CSReset}"/>      
                <apex:commandButton value="Opt Out All" />                        
                <apex:commandButton value="Return to Opportunity" onclick="return confirm('Any unsaved work will be discarded. Do you want to proceed?');" action="{!cancel}"/>            
        <apex:repeat var="Op" value="{!ProductTypes}">
                <div id="tabs-{!Op.ProductType.Product_Type__r.Id}">
                        <apex:outputText value="{!Op.ProductType.Rating__r.Rating_Type__c}" rendered="false"/>
                        <span id = "Ratings-{!Op.ProductType.Id}">
                        <span style='font-weight: bold;color: #0B0B61;'>What is your cross sell rating?</span><p/>
                        <apex:selectRadio id="Rdo" value="{!Op.ProductType.Rating__c}" Layout="pageDirection" onclick="dynamic(this, '{!Op.ProductType.Id}', '{!Op.ProductType.Product_Type__r.Name}', '{!Op.Reasons}');" onchange="RadioItemvalue(this);" styleClass="Class-{!Op.ProductType.Id}">
                            <apex:selectOptions value="{!Op.Ratings}" / >                           
                        <span id="NoOpty-{!Op.ProductType.Id}" style="display: none;"><span style='font-weight: bold;color: #0B0B61;'>Please provide a "No Opportunity" reason.</span><p/>
                            <apex:selectRadio id="sr" value="{!Op.ProductType.Reason__c}" Layout="pageDirection" onchange="RadioItemvalue(this);">
                                <apex:selectOptions value="{!Op.Reasons}"/ >                            
                        <span id="OptOut-{!Op.ProductType.Id}" style="display: none;"><span style='font-weight: bold;color: #0B0B61;'>Please provide an "Opt Out" reason.</span><p/>
                            <apex:selectRadio value="{!Op.ProductType.Opt_Out_Reason__c}" Layout="pageDirection">
                                <apex:selectOptions value="{!Op.OptOuts}"/ >                            
                        <span Id="Q-{!Op.ProductType.Id}" style="display: none;">                                
                            <span style="font-weight: bold;color: #0B0B61;">Who is our primary competitor for this product?</span><p/>
                                <apex:inputField value="{!Op.ProductType.Competitor__c}" style="margin-left: 1.5em;"/><p/>                
                            <apex:repeat var="QA" value="{!Op.CrossSells}">                                                       
                                <span style="font-weight: bold;color: #0B0B61;">{!QA.CrossSell.Cross_Sell_Question__r.Name}</span><p/>
                                    <apex:selectRadio value="{!QA.CrossSell.Cross_Sell_Answer__c}" Layout="pageDirection">
                                        <apex:selectOptions value="{!QA.Options}"/ >                            
                       	<span id="nxtbid-{!Op.ProductType.Id}" style="display: inline;">
                       		<span style="font-weight: bold;color: #0B0B61;">Next Out to Bid Date:  </span>
                       		<apex:inputField id="StartDate" value="{!Op.ProductType.Next_out_to_bid__c}"/> <p/>
                     <script>if ('{!Op.ProductType.Rating__r.Name}' == 'No Opportunity'){document.getElementById("NoOpty-{!Op.ProductType.Id}").style.display = 'inline';}</script>
                    <script>if ('{!Op.ProductType.Rating__r.Name}' == 'Opt Out'){document.getElementById("OptOut-{!Op.ProductType.Id}").style.display = 'inline';}</script>                                
                    <script>if ('{!Op.ProductType.Rating__r.Name}' == "Opt Out"){document.getElementById("Q-{!Op.ProductType.Id}").style.display = 'none';}else{document.getElementById("Q-{!Op.ProductType.Id}").style.display = 'inline';}</script>
                    <script type="text/javascript">if ('{!Op.ProductType.Product_Type__r.req_nxt_tobid__c}' == "true"){document.getElementById("nxtbid-{!Op.ProductType.Id}").style.display = 'inline';}else{document.getElementById("nxtbid-{!Op.ProductType.Id}").style.display = 'none'; }</script>
                    	window.onload = setFocus1();
                    	function setFocus1(){
	                    	var Ratings = document.getElementsByName('{!$Component.Rdo}');
	                    	for(x = 0 ; x < Ratings.length ; x++){
	                    		if(Ratings[x].checked == true && x == 3){
	                    			document.getElementById("Q-{!Op.ProductType.Id}").style.display = 'none';
	                    			document.getElementById("OptOut-{!Op.ProductType.Id}").style.display = 'inline';
                    <input id="hiddenElementId" type="hidden" />
					<script type="text/javascript">
						window.onload = setFocus
						function setFocus()
    function RadioItemvalue(thisp){
    var children = document.getElementById("Ratings-{!Op.ProductType.Id}").childNodes;
    for(var l = 0 ; l < children.length ; l++){ }
    var myradios1 = document.getElementsByName('{!$Component.Rdo}');
    var component = document.getElementsByClassName("Class-{!Op.ProductType.Id}");
    for(var k = 0 ; k < component.length; k++){ var rad = component[k]; alert('Length of component value :'+rad); }
    for (var i = 0, row; row = rad.rows[i]; i++) {
	   alert('Row is :'+row + ' ' + row.value);
   	for (var j = 0, col; col = row.cells[j]; j++) {
     alert('Column is :'+col + ' ' + col.value);
    alert('length of radio :'+rad.length);
    for(var i = 0; i < myradios1.length; i++){ 
    	 var someRadio = myradios1[i];
    	alert('My radios value :' +someRadio.value);
        if(someRadio.checked) {
        	alert('The checked value is :' +someRadio.checked);
   function dynamic(value, noOppId, ProductType, optres){
        var noOppId1 = "NoOpty-";
        var oppout1 = "OptOut-";
        var Q1 = "Q-";
        var nxtbid = "nxtbid-";
        var ProductType = ProductType;
        noOppId1 += noOppId;
        oppout1 += noOppId;
        Q1 += noOppId;
        nxtbid += noOppId;
        var searchId = value.value;
        var noOpptyResult = '{!NoOpty}'.substring(1, '{!NoOpty}'.length-1);
        var opptOutResult = '{!OptOut}'.substring(1, '{!OptOut}'.length-1);
        var QResult = '{!Q}'.substring(1, '{!Q}'.length-1);
        var lstofnoopty = noOpptyResult.split(', ');
        var lstofopptOut = opptOutResult.split(', ');
  		var lstQ = QResult.split(', ');
  		var nooptyvalues = optres;
  		for(x = 0 ; x < lstofnoopty.length ; x++){
            if(lstofnoopty[x]== searchId && (nooptyvalues == "[]")){
                document.getElementById(noOppId1).style.display = 'none'; 
                document.getElementById(oppout1).style.display = 'none';
                document.getElementById(Q1).style.display = 'inline';
             else if(lstofnoopty[x]== searchId){
                document.getElementById(noOppId1).style.display = 'inline'; 
                document.getElementById(oppout1).style.display = 'none';
                document.getElementById(Q1).style.display = 'inline';
        for(x = 0 ; x < lstofopptOut.length ; x++){
            if(lstofopptOut[x]== searchId){
                document.getElementById(oppout1).style.display = 'inline';  
                document.getElementById(noOppId1).style.display = 'none';
                document.getElementById(Q1).style.display = 'none';
        for(x = 0 ; x < lstQ.length ; x++){
            if(lstQ[x]== searchId){
                document.getElementById(oppout1).style.display = 'none';  
                document.getElementById(noOppId1).style.display = 'none';
                document.getElementById(Q1).style.display = 'inline';

you can use jquery, and the partial selector mapping to select your radio buttons.

The selctors will look like

Hi KevinP, 

Could you please give some more info on this? How can i get the select component inside the repeat using jquery partial selector?
you can provide a radio button with an id like 
<apex:selectRadio id="{!Op.ProductType.Id}-Rdo" 
    onclick="dynamic(this, '{!Op.ProductType.Id}', '{!Op.ProductType.Product_Type__r.Name}', '{!Op.Reasons}');" 

Note the id setup. 

However, this is still going to give you the *table*, becaues of how apex:selectRadio works. if you need the actual buttons inside it you'll need to use child selectors. You're looking at something like this in jQuery land
$('table[id*="-Rdo"] > input:radio')

That should give you an array of all inputs with type="radio" that are contained within tables who's id's end in "-Rdo"