Apex Code Development You need to sign in to do that
Don't have an account?
Napster 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:
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>
The selctors will look like
$('input[id*="_date"]')Could you please give some more info on this? How can i get the select component inside the repeat using jquery partial selector?
<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"