function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
YukinonYukinon 

Pass clicked lwc button value to an inputText field

Hello is it possible to pass the value of the clicked button to an input field?

When I clicked:
User-added image
The modal will open get the value of the clicked button like this:
User-added image

Component:
<aura:component controller="CaseCreationController" implements="flexipage:availableForAllPageTypes" access="global">
  	 <aura:attribute name="caseType" type="List" />
     <aura:attribute name="isModalOpen" type="boolean" default="false"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card>
        <div class="slds-p-around_medium slds-grid">
            <aura:iteration items="{!v.caseType}" var="cs">
            <lightning:button variant="brand-outline" label="{!cs}" onclick="{!c.openModal}" name="{!cs}" value="{!cs}" />
   		 </aura:iteration> 
        </div>
     </lightning:card>	
     <aura:if isTrue="{!v.isModalOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-  around--medium">
                     <ui:inputText class="form-control" value="Clicked Button Value Here"/>
                </div>
                 <footer class="slds-modal__footer">
                     <lightning:button variant="neutral" label="Cancel" title="Cancel" onclick="{!c.closeModal }"/>
                     <lightning:button variant="brand" label="OK" title="OK" onclick="{!c.submitDetails}"/>
                 </footer>
            </div>
        </section>
       <div class="slds-backdrop slds-backdrop_open"></div>
     </aura:if>
</aura:component>
ControllerJS:
({
	doInit : function(component, event, helper) {
		    var action =  component.get("c.getCaseTypePicklist");
       		action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS")	{
               component.set("v.caseType", response.getReturnValue()); 
            }else{
                alert("ERROR"); 
            }		
        });
        
        $A.enqueueAction(action);
	},
    
     openModal: function(component, event, helper) {
      component.set("v.isModalOpen", true);
   },
     closeModal: function(component, event, helper) {
      component.set("v.isModalOpen", false);
   }
})

Thanks!
 
Best Answer chosen by Yukinon
mukesh guptamukesh gupta
HI Yukinon,

Please  use below code:-
 
<aura:component controller="CaseCreationController" implements="flexipage:availableForAllPageTypes" access="global">
  	 <aura:attribute name="caseType" type="List" />
	 <aura:attribute name="btnValue" type="String" />
     <aura:attribute name="isModalOpen" type="boolean" default="false"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card>
        <div class="slds-p-around_medium slds-grid">
            <aura:iteration items="{!v.caseType}" var="cs">
            <lightning:button variant="brand-outline" label="{!cs}" onclick="{!c.openModal}" name="{!cs}" value="{!cs}" />
   		 </aura:iteration> 
        </div>
     </lightning:card>	
     <aura:if isTrue="{!v.isModalOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-  around--medium">
                     <ui:inputText class="form-control" value="{!v.btnValue}"/>
                </div>
                 <footer class="slds-modal__footer">
                     <lightning:button variant="neutral" label="Cancel" title="Cancel" onclick="{!c.closeModal }"/>
                     <lightning:button variant="brand" label="OK" title="OK" onclick="{!c.submitDetails}"/>
                 </footer>
            </div>
        </section>
       <div class="slds-backdrop slds-backdrop_open"></div>
     </aura:if>
</aura:component>
 
({
	doInit : function(component, event, helper) {
		    var action =  component.get("c.getCaseTypePicklist");
       		action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS")	{
               component.set("v.caseType", response.getReturnValue()); 
            }else{
                alert("ERROR"); 
            }		
        });
        
        $A.enqueueAction(action);
	},
    
     openModal: function(component, event, helper) {
	  var btnValue = event.getSource().get("v.value");
      component.set("v.isModalOpen", true);
	  component.set("v.btnValue", btnValue);
	  

   },
     closeModal: function(component, event, helper) {
      component.set("v.isModalOpen", false);
	  component.set("v.btnValue", '');
   }
})

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh

All Answers

mukesh guptamukesh gupta
HI Yukinon,

Please  use below code:-
 
<aura:component controller="CaseCreationController" implements="flexipage:availableForAllPageTypes" access="global">
  	 <aura:attribute name="caseType" type="List" />
	 <aura:attribute name="btnValue" type="String" />
     <aura:attribute name="isModalOpen" type="boolean" default="false"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card>
        <div class="slds-p-around_medium slds-grid">
            <aura:iteration items="{!v.caseType}" var="cs">
            <lightning:button variant="brand-outline" label="{!cs}" onclick="{!c.openModal}" name="{!cs}" value="{!cs}" />
   		 </aura:iteration> 
        </div>
     </lightning:card>	
     <aura:if isTrue="{!v.isModalOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-  around--medium">
                     <ui:inputText class="form-control" value="{!v.btnValue}"/>
                </div>
                 <footer class="slds-modal__footer">
                     <lightning:button variant="neutral" label="Cancel" title="Cancel" onclick="{!c.closeModal }"/>
                     <lightning:button variant="brand" label="OK" title="OK" onclick="{!c.submitDetails}"/>
                 </footer>
            </div>
        </section>
       <div class="slds-backdrop slds-backdrop_open"></div>
     </aura:if>
</aura:component>
 
({
	doInit : function(component, event, helper) {
		    var action =  component.get("c.getCaseTypePicklist");
       		action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS")	{
               component.set("v.caseType", response.getReturnValue()); 
            }else{
                alert("ERROR"); 
            }		
        });
        
        $A.enqueueAction(action);
	},
    
     openModal: function(component, event, helper) {
	  var btnValue = event.getSource().get("v.value");
      component.set("v.isModalOpen", true);
	  component.set("v.btnValue", btnValue);
	  

   },
     closeModal: function(component, event, helper) {
      component.set("v.isModalOpen", false);
	  component.set("v.btnValue", '');
   }
})

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh
This was selected as the best answer
CharuDuttCharuDutt
Hii Yukinon
Try Below Code
openModal: function(component, event, helper) {
      component.set("v.isModalOpen", true);
	  component.set("v.btnValue", event.getSource().get("v.value"));
	  

   },
     closeModal: function(component, event, helper) {
      component.set("v.isModalOpen", false);
	  component.set("v.btnValue", '');
   }
Please Mark It As Best Answer If It Helps
Thank You!