+ Start a Discussion
NapsterNapster 

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:pageBlockButtons>
        <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}" / >                           
                        </apex:selectRadio></span><p/>  
                        
                        <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}"/ >                            
                            </apex:selectRadio><p/></span>
                        <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}"/ >                            
                            </apex:selectRadio><p/></span>
                        <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}"/ >                            
                                    </apex:selectRadio>
                            </apex:repeat>
                        </span><p/>
                       	
                       	<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/>
                       	</span>
                     
                     <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>
                    <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';
	                    		}
	                    	}
	                    }
                    </script>
                    <input id="hiddenElementId" type="hidden" />
					<script type="text/javascript">
						window.onload = setFocus
						function setFocus()
						{
						         document.getElementById("hiddenElementId").focus();
						}
					</script>
                    
                    	<script>
    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';
            }
        }
</script>    
                </div>
            </apex:repeat>
        </apex:pageBlock>
</apex:form>

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

The selctors will look like
$('input[id*="_date"]')

 
NapsterNapster
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?
KevinPKevinP
you can provide a radio button with an id like 
<apex:selectRadio id="{!Op.ProductType.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}">

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"