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>

<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"/>



<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>
         
<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></span>
</label>
<label for="good" class="material-icons">
<input type="radio" name="{!rowNum}" id="good" value="good" />
<span></span>
</label>
<label for="poor" class="material-icons">
<input type="radio" name="{!rowNum}" id="poor" value="poor" />
<span></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}" />  
<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>

July 6, 2017
·
Like
0
·
Follow
1

Best Answer chosen by PC

PC
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.

July 7, 2017
·
Like
0
·
Dislike
0

Banwari 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

July 6, 2017
·
Like
0
·
Dislike
0

PC
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.

July 6, 2017
·
Like
0
·
Dislike
0

Banwari kevat1
Hi,
You can use javascript variable.
Thanks
B

July 6, 2017
·
Like
0
·
Dislike
0

PC
hi,
Javascript variable to specify name of the radio button?

July 6, 2017
·
Like
0
·
Dislike
0

Banwari 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></span> </label> <label for="good" class="material-icons"> <input type="radio" name="anything" id="good" value="good" /> <span></span> </label> <label for="poor" class="material-icons"> <input type="radio" name="anything}" id="poor" value="poor" /> <span></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

July 6, 2017
·
Like
0
·
Dislike
0

Banwari kevat1
Hi puja,
Wether it is working or not?
Thanks

July 6, 2017
·
Like
0
·
Dislike
0

Browse by Topic

Welcome to Support!

Show

sorted by

Distinguishing radio button grouping inside repeat

All Answers

You need to sign in to do that.