0

HI I Want to Change Result(Servicevalibility) value as soon as there is any change in Input Fields.But,Now its changing only when i change the value and press tab key .

Component -

Serviceability

            </div>
        </div>
 </div>
    <div>
        <br/>
    </div>

 <div class="slds-grid">
    <div class="slds-col slds-size--4-of-6" >
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Net Income</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id="Netincome" class="slds-scope slds-input" placeholder="Enter Net Income" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Other Income</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id='otherincome' class="slds-scope slds-input" placeholder="Enter Other Income" keyup="{!c.Calculate}"/>

                    </div> 
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>


        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                 </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Marital Status</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputSelect aura:id="SelectedmaritalStatus"  class="slds-scope slds-input" change="{!c.onSelectChange}">
                        <ui:inputSelectOption label="--None--"/>
                        <aura:iteration items="{!v.MaritalStatus}" var="MaritalStatus"> 
                            <ui:inputSelectOption text="{!MaritalStatus}" label="{!MaritalStatus}" />
                        </aura:iteration>
                    </ui:inputSelect> 

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Number Of Dependents</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputnumber aura:id='NoofDependents' class="slds-scope slds-input" placeholder="Enter Number Of Dependents" keyup="{!c.Calculate}"/>
                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>


        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Residential Expense</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id="ResidentialExpense" class="slds-scope slds-input" placeholder="Enter Residential Expense" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Vehicle Loan</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id='VehicleLoan' class="slds-scope slds-input" placeholder="Enter Vehicle Loan" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>


        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                 </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Credit Card Combined Limit</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id="CreditCardLimit" class="slds-scope slds-input" placeholder="Enter Credit Card Limit" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Other Loan</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id='Otherloan' class="slds-scope slds-input" placeholder="Enter Other Loan" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                 </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Other Expense</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputcurrency aura:id="OtherExpense" class="slds-scope slds-input" placeholder="Enter Other Expense" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    <div class="slds-col slds-size--1-of-6">
        <div>
            <div class="slds-size_2-of-2 slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">
                <center>
                    <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Serviceability:</label>
                    <ui:outputText value="{!v.Serviceability}" />
                </center>
            </div>
            <div>

            </div>
        </div>
    </div>
     <div class="slds-col slds-size--1-of-6">
     </div>
 </div>   

</div>

Controller - ({ myAction : function(component, event, helper) {

},
Calculate : function(component,event,helper)
{
    debugger; 
    helper.calculateServiceability(component,event,helper);
},
onSelectChange : function(component,event,helper)
{
    helper.calculateServiceability(component,event,helper);
}

})

Helper- ({ helperMethod : function() {

},
calculateServiceability : function(component,event,helper)
{
    var MarriedTax = $A.get("$Label.c.Married_tax");
    var DependentTax = $A.get("$Label.c.Dependent_tax");
    var Netincome = component.find("Netincome").get("v.value");
    if(Netincome == '' || Netincome == null)
    {
        Netincome = 0;
    }

    var otherIncome = component.find("otherincome").get("v.value");
    if(otherIncome  == '' || otherIncome == null)
    {
        otherIncome =0;
    }

    var MaritalStatus = component.find("SelectedmaritalStatus").get("v.value");
    if(MaritalStatus != 'Married')
    {
        MarriedTax = 0;
    }

    var Dependents = component.find("NoofDependents").get("v.value");
    if(Dependents == '' || Dependents == null)
    {
        Dependents  = 0;
        DependentTax = 0;
    }

    var ResidentialExpense = component.find("ResidentialExpense").get("v.value");
    if(ResidentialExpense == '' || ResidentialExpense == null)
    {
        ResidentialExpense = 0;
    }

    var VehicleLoan = component.find("VehicleLoan").get("v.value");
    if(VehicleLoan == '' || VehicleLoan == null)
    {
        VehicleLoan = 0;
    }

    var CreditCardLimit = component.find("CreditCardLimit").get("v.value");
    if(CreditCardLimit == '' || CreditCardLimit == null)
    {
        CreditCardLimit=0;
    }

    var OtherLoan = component.find("Otherloan").get("v.value");
    if(OtherLoan  == '' || OtherLoan  == null )
    {   
        OtherLoan   = 0;
    }

    var OtherExpense  = component.find("OtherExpense").get("v.value");
    if(OtherExpense  == '' || OtherExpense  == null)
    {
        OtherExpense  = 0;
    }

    var Serviceability =0;
    Serviceability = (Netincome + otherIncome)-MarriedTax-(DependentTax*Dependents)-ResidentialExpense-VehicleLoan-(30*(CreditCardLimit/1000))-OtherLoan-OtherExpense-1515;
    if(Serviceability != null)
    {
        debugger;
         //alert('M IN');
         component.set("v.Serviceability",Serviceability);
         //component.set("v.Calculated",true);
    }


}

})

2

Use updateOn="keyup" in ui:inputcurrency, below is an example:

<ui:inputcurrency aura:id="OtherExpense" 
     class="slds-scope slds-input" 
     placeholder="Enter Other Expense" 
     keyup="{!c.Calculate}" 
     updateOn="keyup"/>

That should solve your issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.