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
teena jacobteena jacob 

How to make an input field appear upon selection of radio button in salesforce lightning component

Hi,

   I need to display fields based only on the radio button selected.
Say there are 2 radio buttons and two Text fields if radiobutton1 is selected it must show field1  and radiobutton2 is selected it must show field2.
How to achieve this scenario in the lightning component.
Best Answer chosen by teena jacob
sfdcMonkey.comsfdcMonkey.com
Hi here is the sample code for it : 
<aura:component>
    <aura:attribute name="options" type="List" default="[
         {'label': 'apples', 'value': 'apples'},
         {'label': 'oranges', 'value': 'oranges'}
    ]"/>
    <aura:attribute name="radioValue" type="String" default="apples"/>
    
    <lightning:radioGroup 
        aura:id="mygroup"
        name="radioButtonGroup"
        label="Radio Button Group"
        options="{! v.options }"
        value="{! v.radioValue }"
        
         />
    
   <aura:if isTrue="{!v.radioValue == 'apples'}">
      <lightning:input label="Apples" name="apple" />
   <aura:set attribute="else">
        <lightning:input label="oranges" name="oranges" /> 
   </aura:set>
        
    </aura:if> 
    
</aura:component>
Thanks
let us know if it helps you
 

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi here is the sample code for it : 
<aura:component>
    <aura:attribute name="options" type="List" default="[
         {'label': 'apples', 'value': 'apples'},
         {'label': 'oranges', 'value': 'oranges'}
    ]"/>
    <aura:attribute name="radioValue" type="String" default="apples"/>
    
    <lightning:radioGroup 
        aura:id="mygroup"
        name="radioButtonGroup"
        label="Radio Button Group"
        options="{! v.options }"
        value="{! v.radioValue }"
        
         />
    
   <aura:if isTrue="{!v.radioValue == 'apples'}">
      <lightning:input label="Apples" name="apple" />
   <aura:set attribute="else">
        <lightning:input label="oranges" name="oranges" /> 
   </aura:set>
        
    </aura:if> 
    
</aura:component>
Thanks
let us know if it helps you
 
This was selected as the best answer
teena jacobteena jacob
Hi ,
     The code is working but I need to use inside Popup Box In Lightning. Its throwing error fails to save the file.
sfdcMonkey.comsfdcMonkey.com
this will work inside popup box as well, and can you share your save function here, and what error you have received ?
teena jacobteena jacob
Hi, 
  That was an error with the bundle version.Its resolved.
I try to get the text field value in the controller on the Submit button click. component.find('ds').getElement('v.value').value
Im not able to rteive vale from the component.
//component
<button class="slds-button slds-button--neutral" onclick="{!c.clickproxy}">Submit</button>​

//controller
 clickproxy :function(component,event,helper){
        console.log('khfujhzgfbujdf function');
        var val = component.find('ds').getElement('v.value').value;
        console.log(val);
        var val1 = component.find('tm').getElement('v.value').value;
        console.log(val1);
    } ​

 
sfdcMonkey.comsfdcMonkey.com
add unique aura:id to both fields and based on selected radio button value get the field value :
use component.find('auraId').get("v.value");
  
clickproxy :function(component,event,helper){
        console.log('khfujhzgfbujdf function');
		var radioVal = component.get("v.radioValue");
		
		var fieldVal ;
		if(radioVal == 'apples'){
		  fieldVal =  component.find('ds').get('v.value');
		}else{
		  fieldVal =  component.find('tm').get('v.value');
		}
     alert(fieldVal );

    } ​
Thanks, let us know if it helps
 
teena jacobteena jacob
Hi,
 It works thank you!