+ Start a Discussion
Agnibha Chakrabarti 10Agnibha Chakrabarti 10 

populate a text box value by selecting value from picklist in lightning component

Suppose there is an inputfield/picklist field.........i want to populate an output textbox with the value of input field or value selected in picklist.
how to do this?
Best Answer chosen by Agnibha Chakrabarti 10
Soyab HussainSoyab Hussain
Hi Agnibha,

I have specially created a formula that you can directly use to fulfil your requirement of always setting a weekday on any input

Here’s the code snippet:
Component:
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    
    <aura:attribute name="ShowText" type="String" />
    <lightning:select aura:id="selectItem" label="Select an item" onchange="{!c.changeSelect}">
        <option value="">choose one...</option>
        <option value="Apex Controller">Apex Controller</option>
        <option value="Visualforce Page">Visualforce Page</option>
        <option value="LWC">LWC</option>
        <option value="Aura">Aura</option>
    </lightning:select>
    <hr/>
    <center>
    	<ui:outputText value="{!v.ShowText}"/>	
    </center>
</aura:component>

JS:

({
   changeSelect :function(component){
        var selectValue=component.find("selectItem").get("v.value");
        component.set("v.ShowText",selectValue);
    },
})


If you found it useful please appreciate my efforts and mark it as the best answer

Thanks,
Soyab

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi Agnibha,

I've gone through your requirement and you can refer below code:

Lightning code:-->

<aura:component>
<aura:attribute name="ShowText" type="String" />
<lightning:select aura:id="selectItem" label="Select an item" onchange="{!c.doSomething}">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
</lightning:select>
<ui:outputText label="Selected Value:" value="{!ShowText}"/>
</aura:component>


JS Controller-->

({
   doSomething :function(c,e,h){
        
        var selectValue=component.find("selecteItem").get("v.value");
         
        component.set("v.ShowText",selectValue);
        
        
    },
})



I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
 
Agnibha Chakrabarti 10Agnibha Chakrabarti 10
This page has an error. You might just need to refresh it. Action failed: c:myCmp$controller$doSomething [Cannot read property 'get' of undefined] Failing descriptor: {c:myCmp$controller$doSomething}



this error is coming
when i run it
Soyab HussainSoyab Hussain
Hi Agnibha,

I have specially created a formula that you can directly use to fulfil your requirement of always setting a weekday on any input

Here’s the code snippet:
Component:
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    
    <aura:attribute name="ShowText" type="String" />
    <lightning:select aura:id="selectItem" label="Select an item" onchange="{!c.changeSelect}">
        <option value="">choose one...</option>
        <option value="Apex Controller">Apex Controller</option>
        <option value="Visualforce Page">Visualforce Page</option>
        <option value="LWC">LWC</option>
        <option value="Aura">Aura</option>
    </lightning:select>
    <hr/>
    <center>
    	<ui:outputText value="{!v.ShowText}"/>	
    </center>
</aura:component>

JS:

({
   changeSelect :function(component){
        var selectValue=component.find("selectItem").get("v.value");
        component.set("v.ShowText",selectValue);
    },
})


If you found it useful please appreciate my efforts and mark it as the best answer

Thanks,
Soyab
This was selected as the best answer