+ Start a Discussion
Puja ChoudharyPuja Choudhary 

Distinguishing radio button grouping inside repeat

Hi, I am creating a visualforce feedbackform with smiley , I have a custom object Feedback__c and Response__c . So I am fetching the questions from Feedback__c using repeat .
For smiley I am using radio buttons inside repeat function.
I want to select one radio button from each group.But the problem is the radio button is working for first row but when i am clicking on any other row again the respected radio button from the first row get selected.
My code is:-

<apex:page standardController="Feedback__c" extensions="ctr_feedbackform" applyHtmlTag="true" sidebar="false" showHeader="false" language="{!langu}" standardStylesheets="false"  doctype="HTML-5.0">
   <html>
    
    <head>
    <!--js and css files-->
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />        
       
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"/>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 
        <link href="{!URLFOR($Resource.bootstrap,'bootstrap/bootstrap/css/bootstrap.css')}" rel="stylesheet" />
        <link href="{!URLFOR($Resource.bootstrap,'bootstrap/bootstrap/dist/jquery.bootgrid.css')}" rel="stylesheet" />        
        <script src="{!URLFOR($Resource.bootstrap,'bootstrap/bootstrap/js/modernizr-2.8.1.js')}"></script>
        <script src="{!URLFOR($Resource.bootstrap,'bootstrap/bootstrap/js/bootstrap.min.js')}"></script>
        <script src="{!URLFOR($Resource.bootstrap,'bootstrap/bootstrap/js/star-rating.js')}"></script> 
        <apex:stylesheet value="{!URLFOR($Resource.bootstrap,'bootstrap/bootstrap/css/star-rating.css')}"/> 
        <apex:includeScript value="{!URLFOR($Resource.asset, 'asset/js/jquery.min.js')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.asset, 'asset/css/bootstrap.min.css')}"/>
        
        <title>Citi Residency</title>
     <style>            
            .msgpanel{
                color: #3c763d;
                background-color: #dff0d8;
                border-color: #d6e9c6;
                margin-top: 250px;
                margin-left: 300px;
            }     
            .panel-primary> .panel-heading {
                font-weight: bold;
            }
            .list{
                width: 20%;
                margin-left: 430px;
            }
            .pick{
                margin-left: 150px;
            }
            .menu{
                text-align: center;
                cursor: pointer;
                color: #428bca;
                font-weight: normal;
            }
            .pull-left {
                margin-top: 10px;
            }
            .btn-danger {
                margin-left: 10px;
            }
            .fontcolor{
                background-color: #eee;
                color: #428bca;
            }
            .vertical-center {
              min-height: 100%;
              min-height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              display: -webkit-flex; /* For Safari */
              -webkit-justify-content: center; /* For Safari */
              -webkit-align-items: center; /* For Safari */
            }
        </style>
          <style>

.lookupInput img
{
    background-repeat: no-repeat;
    margin-center: .25em;
    vertical-align: right;
}
.lookupInput .disabled
{
    background-color: #ccc;
}
.lookupInput .emptyDependentLookup
{
    font-style: italic;
}
.lookupInput input[readonly]
{
    background-color: #e6e6e6;
    border: 2px solid #e6e6e6;
    color: #333;
    cursor: default;
}
.lookupInput a.readOnly
{
    float: right;
}
.lookupInput span.readOnly
{
    display: block;
    white-space: normal;
}
.lookupInput span.totalSummary
{
    font-weight: bold;
}
.inlineEditRequiredDiv .lookupInput img,.inlineEditDiv .lookupInput img
{
    vertical-align: middle;
}
.quickCreateModule .lookupInput input {
    max-width: 155px
}
.lookupIcon {
    background-image: url(/img/func_icons/util/lookup20.gif);
    background-position: 0 0;
    width: 20px;
    height: 20px;
    background-position: top left
}
.lookupIconOn {
    background-image: url(/img/func_icons/util/lookup20.gif);
    background-position: 0 0;
    width: 20px;
    height: 20px;
    background-position: top right

</style>

<style>
/* lookup field override */


.lookupInput img {
  float:center;
}
.span.lookupInput {
  position: relative;
  display: inherit;
}
.lookupInput a, .lookupInput a {
  border: none !important;
  background: none !important;
}

.radioinput input[type="radio"]{float:top;}

.radioinput label{display:block;}

    lor:#f2f2f2;
    font-family:Arial, sans-serif;
}

 .left   {text-align:left;}
 .center {text-align:center;}
 .right  {text-align:right;}
 .my_text{
     font-family:  Arial, Helvetica, sans-serif
     font-size:  60px;
     font-weight: bold;
     color: #337AB7;
}
</style> 

<style>

/* =============================================
* RADIO BUTTONS
=============================================== */

#radios label {
    cursor: pointer;
    position: relative;
}

#radios label + label {
    margin-left: 15px;
}

input[type="radio"] {
    opacity: 0; /* hidden but still tabable */
    position: absolute;
}

input[type="radio"] + span {
    font-family: 'Material Icons';
    //color: #B3CEFB;
    border-radius: 50%;
    padding: 20px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

input[type="radio"]:checked + span {
    color: #D9E7FD;
  background-color: #4285F4;
}

input[type="radio"]:focus + span {
    color: #fff;
}

/* ================ TOOLTIPS ================= */

#radios label:hover::before {
    content: attr(for);
    font-family: Roboto, -apple-system, sans-serif;
    text-transform: capitalize;
    font-size: 11px;
    position: absolute;
    top: 170%;
    left: 0;
    right: 0;
    opacity: 0.75;
    background-color: #323232;
    color: #fff;    
    padding: 4px;
    border-radius: 3px;
  display: block;
}

</style>
     
    </head>
    
    <apex:form >
        <apex:pageBlock >
            <apex:actionFunction name="setEng" action="{!changeToEnglish}" immediate="true"/>
            <!--<apex:actionFunction name="setBen" action="{!changeToBengali}" immediate="true"/>-->
            <!--<apex:actionFunction name="setHindi" action="{!changeToHindi}" immediate="true"/>-->
            
            <div class="vertical-center">
            <div class="container">
                
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">                                         
                        <div class="panel panel-primary"> 
                            <div class="panel-heading">                                        
                                <div class="pull-left">
                                    <h3 class="panel-title">{!$label.FBTitle}</h3>
                                </div>
                                <div class="pull-right">
                                    <ul class="nav nav-tabs"> 
                                      
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                            </div> 
                           
                            <div class="panel-body"> 
                                <div class="alert-danger">
                                    <apex:messages />
                                </div> 
                                
                                <div class="form-group"> 
                                    <label for="desc">{!$ObjectType.Response__c.fields.Email__c.Label}:</label>
                                    <apex:inputField value="{!re.Email__c}" styleClass="form-control" html-placeholder="xyz@abc.com"  required="true"/>   
                                </div> 
                                <div class="form-group"> 
                                    <label for="desc">{!$ObjectType.Response__c.fields.Mobile__c.Label}:</label>
                                    <apex:inputField type="tel" value="{!re.Mobile__c}" styleClass="form-control" html-placeholder="10 digit Mobile No. " required="true"/>   
                                </div>
                               
                                <div class="form-group"> 
                                    <label for="desc">{!$ObjectType.Response__c.fields.Room__c.Label}:</label>
                                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                                    <apex:inputField value="{!re.Room__c}"/>   
                                </div> 
                                
                                <apex:variable value="{!1}" var="rowNum"/>  
                                <apex:repeat value="{!fb}" var="f">
                                 <apex:outputPanel rendered="{!if(f.Category__c='Restaurant',TRUE,FALSE)}">
                                    <div class="row form-group">
                                        <div class="col-md-12 col-sm-12 col-xs-12"> 
                                            <div class="my_text">
                                            
                                                ({!rowNum}) {!f.Question__c} 
                                            </div> 
                                        </div>
                                        <br/><br/>
                                        <div class="col-md-6 col-sm-6 col-xs-12 "> 
                                       
                                                <div id="{!rowNum}">
                                                    <label for="excellent" class="material-icons">
                                                        <input type="radio" name="{!rowNum}" id="excellent" value="excellent"/>
                                                        <span>&#xE815;</span>
                                                    </label>                                
                                                    <label for="good" class="material-icons">
                                                        <input type="radio" name="{!rowNum}" id="good" value="good" />
                                                        <span>&#xE812;</span>
                                                    </label>
                                                    <label for="poor" class="material-icons">
                                                        <input type="radio" name="{!rowNum}" id="poor" value="poor" />
                                                        <span>&#xE814;</span>
                                                    </label>
                                                </div>
                                            
                                                                                     
                                        </div>
                                      
                                        
                                    </div>      
                                    <apex:variable var="rowNum" value="{!rowNum + 1}"/>
                                    </apex:outputPanel>
                                    <br/>
                                </apex:repeat>
                                
                                
                                
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-5">
                                     <apex:commandButton styleClass="btn btn-success" value="{!$Label.FBSave}" action="{!save}" />&nbsp;&nbsp;
                                     <apex:commandButton styleClass="btn btn-danger" value="{!$Label.FBCancel}" immediate="true" action="{!Cancel}" /> 
                                    </div>
                                </div> 
                            </div> 
                          
                          </div>                  
                      </div>
                  </div>
              </div>
          </div>
          
        </apex:pageBlock>
        
        
    </apex:form>
    </html>
</apex:page>
 
Best Answer chosen by Puja Choudhary
Puja ChoudharyPuja Choudhary
Thanks, Acually the problem was id of respective radio buttons. I changed the id as for eg excellent{!rowNum}
Now its working fine in the vf page.

Now I want to save the selected radio button value in a custom object Response__c
for ex. if some one select excellent and click on the save button... then the value should go to the backend, either textbox , picklist or checkbox.


 

All Answers

Banwari kevat1Banwari kevat1
Hi Puja,
   <apex:variable> does not support reassignment inside of an iteration component, such as <apex:dataTable> or <apex:repeat>. The result of doing so, e.g., incrementing the <apex:variable> as a counter, is unsupported and undefined.

You can also go through with this link
https://success.salesforce.com/ideaView?id=08730000000GmlC
Salesforce missed this. You can vote it.

And also i'm looking for alternative for that. I'll let you know whenever i find any solution.

Thanks
Banwari
Puja ChoudharyPuja Choudhary
Hi,
actually the variable is incrementing . As I can print the question no inside the repeat ...
So what can i do alternatively to get the selected radio button.
Here I used the {!rowNum} just to distinguish the group of radio buttons. I also tried with {!f.id} but it still didn't worked.
Banwari kevat1Banwari kevat1
Hi,
 You can use javascript variable.
Thanks
B
 
Puja ChoudharyPuja Choudhary
hi,
Javascript variable to specify name of the radio button?
Banwari kevat1Banwari kevat1
Hi,
 Yes right. But one thing first of all you can try this first snipet.
<div id="{!rowNum}">
                                                    <label for="excellent" class="material-icons">
                                                        <input type="radio" name="anything" id="excellent" value="excellent"/>
                                                        <span>&#xE815;</span>
                                                    </label>                                
                                                    <label for="good" class="material-icons">
                                                        <input type="radio" name="anything" id="good" value="good" />
                                                        <span>&#xE812;</span>
                                                    </label>
                                                    <label for="poor" class="material-icons">
                                                        <input type="radio" name="anything}" id="poor" value="poor" />
                                                        <span>&#xE814;</span>
                                                    </label>
                                                </div>

Please don't use expression in name of radio button. I think this will work. I tested at my end.

You can varify using following example given below:
 
Controller:
 public class repeatCon {
public String[] getStrings() {
        return new String[]{'Q ONE','Q TWO','Q THREE'};
    }

}



And vf page: 
<apex:page controller="repeatCon" id="thePage">
    <apex:repeat value="{!strings}" var="string" id="theRepeat">
        <apex:outputText value="{!string}" id="theValue"/><br/>
        <form action="">
            <input type="radio" name="gender" value="male"/> Male<br/>
            <input type="radio" name="gender" value="female"/> Female<br/>
            <input type="radio" name="gender" value="other"/> Other
        </form>
    </apex:repeat>
</apex:page>

Thanks
Banwari
Banwari kevat1Banwari kevat1
Hi puja,
Wether it is  working or not?
Thanks
Puja ChoudharyPuja Choudhary
Thanks, Acually the problem was id of respective radio buttons. I changed the id as for eg excellent{!rowNum}
Now its working fine in the vf page.

Now I want to save the selected radio button value in a custom object Response__c
for ex. if some one select excellent and click on the save button... then the value should go to the backend, either textbox , picklist or checkbox.


 
This was selected as the best answer