Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save saicharanreddyk/933d0d2093485369b0ee2be5c4b06f20 to your computer and use it in GitHub Desktop.
Save saicharanreddyk/933d0d2093485369b0ee2be5c4b06f20 to your computer and use it in GitHub Desktop.
Lightning - How to read input values based on ids
If we want read the input values by using ids we need to use
component.find("Id of the element").get("v.value");
If we want to set any value based on id we need to use below code
component.find("Id of the element").set("v.value");
Component:
*************************************************************************
<aura:component >
<lightning:card iconName="standard:contact">
<aura:set attribute="actions">
<lightning:buttonGroup>
<lightning:button label="Add" aura:id="add" name="Addition" onclick="{!c.calculate}" />
<lightning:button label="Mul" aura:id="mul" name="Mutilication" onclick="{!c.calculate}" />
<lightning:button label="Cancel" aura:id="cancel" name="Cancel" onclick="{!c.calculate}" />
</lightning:buttonGroup>
</aura:set>
<aura:set attribute="title">
Calculator<br/>
Simple Calculator
</aura:set>
<lightning:input label="Enter A Value: " aura:id="aval" name="Avalue" required="true" />
<lightning:input label="Enter B Value: " aura:id="bval" name="Bvalue" required="true" />
<lightning:input label="Result " aura:id="result" name="Result"/>
</lightning:card>
</aura:component>
*************************************************************************
Controller
*************************************************************************
({
calculate : function(component, event, helper) {
var evt = event.getSource(); // From which element event was occured ?
var id = evt.getLocalId(); // Id of the element from which event occured
var name = evt.get("v.name"); // Name of the element from which event occured
var a = component.find("aval").get("v.value"); // Getting the value from the input component based on id "aval"
var b = component.find("bval").get("v.value"); // Getting the value from the input component based on id "bval"
if(id=='add'){
console.log(id);
var result=parseInt(a)+parseInt(b);
component.find("result").set("v.value",result); // Setting the value to the input component based on id "result"
}else if(id=='mul'){
console.log(id);
var result=a*b;
component.find("result").set("v.value",result);
}else{
console.log(id);
component.find("aval").set("v.value",null);
component.find("bval").set("v.value",null);
component.find("result").set("v.value",null);
}
}
})
*************************************************************************
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment