Created
February 5, 2020 10:11
-
-
Save saicharanreddyk/933d0d2093485369b0ee2be5c4b06f20 to your computer and use it in GitHub Desktop.
Lightning - How to read input values based on ids
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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