Read value attribute in lightning button in the client js controller

Question

I create a bunch of buttons in a table with aura:iteration. Think of it as one per contact per row to act on the record. Here is the button markup inside a td -

<lightning:button variant="brand" label="Charge" value="{!s.Id}" onclick="{!c.callMyCallback}" />

Now, how do I access the value attribute for the button in my client js controller callback? event.currentTarget.value is undefined and event.target.value doesn't work either. Any ideas? Thanks.

Answer 1

The solution is to build your own button component, using an Aura.action attribute :)

Generic component Button:

<aura:component>

    <aura:attribute name="press" type="Aura.Action" access="global" description="JS controller action to perform when button pressed"/>
    <aura:attribute name="value" type="String" access="global" description="Button value"/> 

    <button onclick="{!v.press}" value="{!v.value}">
       <!-- manage your styles here with some input parameters -->
    </button>

</aura:component>

Then u can call it like that from any component:

<c:Button value="yourvaluehere" press="{!c.onPushTheButton}" />

Js to get the value from any component controller :

onPushTheButton : function(component, event, helper) {
    var Val = event.target.value;
    // You'll get 'yourvaluehere' in Val, do whatever u need with it :)
}   

You could also create a Facet component

<aura:component>

    <aura:attribute name="press" type="Aura.Action" access="global" description="JS controller action to perform when button pressed"/>
    <aura:attribute name="value" type="String" access="global" description="Button value"/> 

    <span onclick="{!v.press}" value="{!v.value}">
       {!v.body}
    </span>

</aura:component>

that you would call like

<c:Button value="yourvaluehere" press="{!c.onPushTheButton}">
     <p style="background-color:green;">MyButton,images,whatever u want</p>
</c:Button>

Answer 2

Now you can use event.getSource().get("v.value") function to get lightning button value when clicked.

From the Salesforce documentation:

In the client-side controller, you can use one of the following methods to find out which button was clicked:

• event.getSource().getLocalId() returns the aura:id of the clicked button.
• event.getSource().get("v.name") returns the name of the clicked button.

Answer 3

I don't think you can get to the attributes with the LockerService. Your best bet is to use the ui:button component so that your callback receives the 'press' event. Then your controller can get the value like this:

callMyCallback : function(cmp, event, helper) {
    var value = event.getSource().get('v.value');
}

Right now, I only use the lightning:button component when I have a single button with a single callback.

Answer 4

You can try below:

<lightning:button variant="brand" label="Charge" **data-value**="{!s.Id}" onclick="{!c.callMyCallback}" />

callMyCallback : function(cmp, event, helper) {
    var value = **event.target.dataset.value**;
}