+ Start a Discussion
Agnibha Chakrabarti 10Agnibha Chakrabarti 10 

how to get the value from <a> tag list to controller

Hi,
User-added imageI want an action that, when i will click ine of those link then my input box with that name.


im giving my codes..
Component:
<aura:attribute name="String" type="String[]"/>
    
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<lightning:card title="Filtered Values">
<div class="search-field">
<lightning:input aura:id="nameFilter" label="Filter names" onchange="{!c.handleNameFilterChange}" />
</div>
    <!--
<div class="results">
<aura:if isTrue="{!v.contacts.length > 0}">
<p class="has-results">
Showing {!v.contacts.length} contact(s):
</p>
<ol class="slds-list_dotted">
-->
   
    <ol>
        
<aura:iteration items="{!v.String}" var="s">
<li>
<a id="getId" onclick="{!c.handleClick}">
{!s}
</a> 
</li>
       
</aura:iteration>
                                       
    </ol></lightning:card></aura:component>


controller
({
init: function(component, event, helper) {
helper.loadList(component);
},

handleNameFilterChange: function (component, event, helper) {
helper.loadList(component);
},

})

helper
 
({
loadList: function(component) {
var action = component.get("c.allContacts");
var nameFilterString = component.find("nameFilter").get("v.value");
action.setParams({
nameFilterString: nameFilterString
});
action.setCallback(this, function(a) {
component.set("v.String", a.getReturnValue());
});
$A.enqueueAction(action); 
}
})
thanks,
​​​​​​​
Best Answer chosen by Agnibha Chakrabarti 10
Soyab HussainSoyab Hussain
Hi Agnibha,
First of all, you have to remove id attribute from anchor tag, as we don not user static id in the iteration.
You will also need to add a custom attribute to get the value of the selected anchor tag.
 
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="String" type="String[]"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:card title="Filtered Values">
        <div class="search-field">
            <lightning:input aura:id="nameFilter" label="Filter names" onchange="{!c.handleNameFilterChange}" />
        </div>
        <!--
<div class="results">
<aura:if isTrue="{!v.contacts.length > 0}">
<p class="has-results">
Showing {!v.contacts.length} contact(s):
</p>
<ol class="slds-list_dotted">
-->
        
        <ol>
            
            <aura:iteration items="{!v.String}" var="s">
                <li>
                    <a onclick="{!c.handleClick}">
                        {!s}
                    </a> 
                </li>
                
            </aura:iteration>
            
        </ol>
    </lightning:card>
</aura:component>
You have to define an method called handleClick for capturing anchor tag value and assign into the input box.
({
    init: function(component, event, helper) {
        helper.loadList(component);
    },
    
    handleNameFilterChange: function (component, event, helper) {
        helper.loadList(component);
    },
    handleClick: function (component, event, helper) {
        alert(event.currentTarget.dataset.item);
        component.find("nameFilter").set("v.value",event.currentTarget.dataset.item)
    },
    
})

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

Thanks,
Soyab

All Answers

Soyab HussainSoyab Hussain
Hi Agnibha,
First of all, you have to remove id attribute from anchor tag, as we don not user static id in the iteration.
You will also need to add a custom attribute to get the value of the selected anchor tag.
 
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="String" type="String[]"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:card title="Filtered Values">
        <div class="search-field">
            <lightning:input aura:id="nameFilter" label="Filter names" onchange="{!c.handleNameFilterChange}" />
        </div>
        <!--
<div class="results">
<aura:if isTrue="{!v.contacts.length > 0}">
<p class="has-results">
Showing {!v.contacts.length} contact(s):
</p>
<ol class="slds-list_dotted">
-->
        
        <ol>
            
            <aura:iteration items="{!v.String}" var="s">
                <li>
                    <a onclick="{!c.handleClick}">
                        {!s}
                    </a> 
                </li>
                
            </aura:iteration>
            
        </ol>
    </lightning:card>
</aura:component>
You have to define an method called handleClick for capturing anchor tag value and assign into the input box.
({
    init: function(component, event, helper) {
        helper.loadList(component);
    },
    
    handleNameFilterChange: function (component, event, helper) {
        helper.loadList(component);
    },
    handleClick: function (component, event, helper) {
        alert(event.currentTarget.dataset.item);
        component.find("nameFilter").set("v.value",event.currentTarget.dataset.item)
    },
    
})

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
Agnibha Chakrabarti 10Agnibha Chakrabarti 10
hi Soyab........the alert is Showing value" undefined" in event.currentTarget.dataset.item
can you check?
Soyab HussainSoyab Hussain
Hi Agnibha,

Sorry, I forgot to add code in component, 
please add this attribute in you anchor tab like this.  data-item="{!s}"
<a data-item="{!s}" onclick="{!c.handleClick}">
  {!s}
</a>

 
Agnibha Chakrabarti 10Agnibha Chakrabarti 10
Thanks Soyab......its working fine now