function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sandesh Vishwakarma 9Sandesh Vishwakarma 9 

Hello Everyone. I want to create a lightning component where i will have 3 radio buttons , now i want to store the selected values of radio buttons and show them on to the submit click. Please help me out

Best Answer chosen by Sandesh Vishwakarma 9
ravi soniravi soni
hi sandesh,
try below modified code. I hope this time it would be as your expectations. 
<aura:component >
    <aura:attribute name="lstGrpValue" type="list"/>
     <aura:attribute name="options" type="List" default="[ 
    {'label': 'Yes', 'value': 'yes'},
    {'label': 'No', 'value': 'no'},
    {'label': 'In Progress', 'value': 'inProgress'}
    ]"/> 
    
    
    
    

	<div class="slds-m_around_small">
            <h1>Group 1 </h1>
             <lightning:radioGroup name="learnGrp1"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                           aura:id="group1"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 2</h1>
             <lightning:radioGroup name="learnGrp2"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group2"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 3</h1>
             <lightning:radioGroup name="learnGrp3"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group3"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 4</h1>
             <lightning:radioGroup name="learnGrp4"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group4"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 5</h1>
             <lightning:radioGroup name="learnGrp5"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group5"/>
            </div>
   
    <lightning:button label="submit" onclick="{!c.handleSubmit}"/>
    
    
    
     <aura:iteration items="{!v.lstGrpValue}" var="item" indexVar="indx">
         <p>{!item}</p>
    </aura:iteration>
</aura:component>
  
({
    handleSubmit : function(component, event, helper) {
        var lstValue = [];
        for(var i=1; i<=5; i++){
            var grpId = 'group' + i;
            
        lstValue.push(component.find(grpId).get('v.value'));    
        }
        console.log('lstValue===> ' + lstValue);
        component.set('v.lstGrpValue',lstValue);
        
    },
    
    handleRadioChange : function(component, event, helper) {
        
    },
})

don't forget to mark it as best answer.
Thank you

All Answers

Sai PraveenSai Praveen (Salesforce Developers) 
Hi Sandesh,

The code can be written as below .

Component file
  
<aura:component>
    <aura:attribute name="selection1" type="String" default=""/>
  <aura:attribute name="selection" type="String" default=""/>
    <aura:attribute name="variable1" type="boolean" default="false"/>

   <!-- <aura:attribute name="selectoon1" type="string"default=""/>   -->
    <b>Role</b>
    <ui:inputRadio text="1" label="1" name="Role" change="{!c.onGroup}"/>
    <ui:inputRadio text="2" label="2" name="Role" change="{!c.onGroup}" />
     <ui:inputRadio text="3" label="3" name="Role" change="{!c.onGroup}"/>
     <ui:inputRadio text="4" label="4" name="Role" change="{!c.onGroup}"/>
     <ui:inputRadio text="5" label="5" name="Role" change="{!c.onGroup}"/>
    
    <b>Name</b>
        <ui:inputRadio text="sam" label="sam" name="Name" change="{!c.onGro}"/>
    <ui:inputRadio text="nav" label="nav" name="Name" change="{!c.onGro}" />
     <ui:inputRadio text="san" label="san" name="Name" change="{!c.onGro}"/>
     <ui:inputRadio text="pre" label="pre" name="Name" change="{!c.onGro}"/>
     <ui:inputRadio text="hai" label="hai" name="Name" change="{!c.onGro}"/>
    
        <lightning:button variant="base" label="Submit" title="Base action" onclick="{! c.handleClick }"/> <br></br>

   <aura:if isTrue="{!v.variable1}">
   <b> RoleSelected </b>
    <p><ui:outputText class="result" aura:id="result" value="{!v.selection}" /></p>
       <b>NameSelected </b>
    <p><ui:outputText class="result" aura:id="result" value="{!v.selection1}" /></p>
</aura:if>
</aura:component>

JS File:
  
({
	onGroup : function (component, event, helper) {
        var selected = event.getSource().get("v.text");
        component.set("v.selection",selected);
    },
    onGro : function (component, event, helper) {
        var selected1 = event.getSource().get("v.text");
        component.set("v.selection1",selected1);
    },
    handleClick:function(component,event,helper){
    component.set("v.variable1",true);
}
})

I did not include any styling for the component. This is just an idea of the component.

If this solution helps, Please mark it as best answer.

Thanks,
Sandesh Vishwakarma 9Sandesh Vishwakarma 9
Hi Sir Praveen , I thank you for the help , but actually this way is ok for having 2 or 3 radio buttons but what i actually want is that i have atleast 12  radio buttons , i want that the selected values should be stored into a single attribute so that i can iterate over onto it to show results. Further help would be most appreciated. Thanks
ravi soniravi soni
hi sandesh,
I think you need to use lightning:radioGroup for achieve your requirment.
here is sample example you can get ref. from it. 
<aura:component >
    <aura:attribute name="options" type="List" default="[ 
    {'label': 'Yes', 'value': 'yes'},
    {'label': 'No', 'value': 'no'},
    {'label': 'In Progress', 'value': 'inProgress'}
    ]"/> 
	 <div class="slds-m_around_small">
            <h1> Group 1</h1>
             <lightning:radioGroup name="learnGrp1"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                           aura:id="group1"/>
            </div>
    
     <div class="slds-m_around_small">
            <h1> Group 2</h1>
             <lightning:radioGroup name="learnGrp2"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group2"/>
            </div>
    
    <lightning:button label="submit" onclick="{!c.handleSubmit}"/>
</aura:component>
  
({
	handleSubmit : function(component, event, helper) {
		var getValue1 = component.find('group1').get('v.value');
        var getValue2 = component.find('group2').get('v.value');
        alert(getValue1 + ' || ' + getValue2);
	},
    
     handleRadioChange : function(component, event, helper) {
     
     },
})

don't forget to mark it as best answer if it helps you so that it can help to others in future.
Thank you
Sandesh Vishwakarma 9Sandesh Vishwakarma 9
Veer Soni , I thank you for the help ,

But Once again i would like to clarify the requirement . Here it is -->  { I have 10 radio groups each of them have 3 options of 'YES' / 'NO' / 'DONT KNOW' , now what i want is when we done selecting the options for all 10 , each of those result values needs to be stored into a single attribute so that i can iterate over that attribute for further requirement }
Sandesh Vishwakarma 9Sandesh Vishwakarma 9
Veer Soni , 

The above code is absolutely fine just need one thing like [ getValue1 , getValue2  ] these both value i need to store into an LIST = Type attribute of aura component
ravi soniravi soni
hi sandesh,
try below modified code. I hope this time it would be as your expectations. 
<aura:component >
    <aura:attribute name="lstGrpValue" type="list"/>
     <aura:attribute name="options" type="List" default="[ 
    {'label': 'Yes', 'value': 'yes'},
    {'label': 'No', 'value': 'no'},
    {'label': 'In Progress', 'value': 'inProgress'}
    ]"/> 
    
    
    
    

	<div class="slds-m_around_small">
            <h1>Group 1 </h1>
             <lightning:radioGroup name="learnGrp1"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                           aura:id="group1"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 2</h1>
             <lightning:radioGroup name="learnGrp2"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group2"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 3</h1>
             <lightning:radioGroup name="learnGrp3"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group3"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 4</h1>
             <lightning:radioGroup name="learnGrp4"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group4"/>
            </div>
        
     <div class="slds-m_around_small">
            <h1> Group 5</h1>
             <lightning:radioGroup name="learnGrp5"
                          
                          label="Radio Group"
                          variant="label-hidden"
                          options="{!v.options }"
                          type="radio"
                          onchange="{!c.handleRadioChange}"
                          aura:id="group5"/>
            </div>
   
    <lightning:button label="submit" onclick="{!c.handleSubmit}"/>
    
    
    
     <aura:iteration items="{!v.lstGrpValue}" var="item" indexVar="indx">
         <p>{!item}</p>
    </aura:iteration>
</aura:component>
  
({
    handleSubmit : function(component, event, helper) {
        var lstValue = [];
        for(var i=1; i<=5; i++){
            var grpId = 'group' + i;
            
        lstValue.push(component.find(grpId).get('v.value'));    
        }
        console.log('lstValue===> ' + lstValue);
        component.set('v.lstGrpValue',lstValue);
        
    },
    
    handleRadioChange : function(component, event, helper) {
        
    },
})

don't forget to mark it as best answer.
Thank you
This was selected as the best answer