3

I've read through the different posts regarding this error, and for the life of me I cannot figure out why it's not working right.... I would really appreciate some help. I've checked to make sure cases match with naming things, and tried to follow every guide I could find and post regarding the same error.

It's an exercise for collecting credit card information, after first authenticating with an external system like Zuora. When it loads, it returns the current payment information, and this part is working right. I get the following error though when I try to click the !c.submitButton.

Uncaught Action failed: c:PO_UpdateZuoraPayment$controller$submitButton [Cannot read property 'get' of undefined]

Below is my code. cmp

<aura:component controller="PO_UpdateZuoraPayment_Controller" access="global" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
            <ltng:require styles="/resource/SLDS221/assets/styles/salesforce-lightning-design-system-ltng.css" />
            <aura:attribute name="zuoraAccountId" type="String"/>
            <aura:attribute name="cardNumber" type="String"/>
            <aura:attribute name="cardExpMonth" type="String"/>
            <aura:attribute name="cardExpYear" type="String"/>
            <aura:attribute name="cardHolderName" type="String"/>


            <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

        <div aria-labelledby="updatePaymentForm">
            <fieldset class="slds-box slds-theme--default slds-container--small">
            <form class="slds-form--stacked">
                <legend id="updatePaymentForm" class="slds-text-heading--small">
                Change Zuora Default Payment Card
                </legend>
                <lightning:input label="Card Holder Name"
                aura:id="cardform"
                name="holderName"
                placeholder="{!v.cardHolderName}"
                />
                <lightning:input label="Card Number"
                aura:id="cardform"
                name="cardNum"
                placeholder="{!v.cardNumber}"

                />
                <lightning:input label="Card Expiration Month"
                aura:id="cardform"
                name="cardMon"
                placeholder="{!v.cardExpMonth}"
                />
                <lightning:input label="Card Expiration Year"
                aura:id="cardform"
                name="cardYr"
                placeholder="{!v.cardExpYear}"
                />
                <lightning:input label="Card Security Code (digits on back of card)"
                aura:id="cardform"
                name="cardCode"

                placeholder="***"
                />
                <lightning:button label="Change Payment Method" 
                aura:id="ccsb"
                name="leButton"
                class="slds-m-top--medium"
                onclick="{!c.submitButton}"
                />
            </form>
        </fieldset>
        </div>

        </aura:component>

JavaScript controller

({
            //this comment added for this post. This doInit is working fine as far as I can tell.
            doInit : function (component, event, helper) {
                console.log('initenn');
                var action = component.get("c.getThisAccount");
                action.setParams({
                    "recordId" : component.get("v.recordId")
                });
                action.setCallback(this, function(response){
                    var data = JSON.parse(response.getReturnValue());
                    console.log('json parse test :: ');
                    console.dir(data);


                    if(data != null){
                        //console.log('data returned :: ' + data);
                        //component.set("v.account", data);
                        component.set("v.cardHolderName", data.cardHolderName);
                        component.set("v.zuoraAccountId", data.zAccountId);
                        component.set("v.cardNumber", data.cardNumber);
                        component.set("v.cardExpMonth", data.cardMonth);
                        component.set("v.cardExpYear", data.cardYear);
                    }

                });

                $A.enqueueAction(action);

            },

            submitButton : function(cmp, evt){
                //the below is what throws my error
                var selected = evt.getSource().get("v.label");
                var resultCmp = cmp.find("cardForm");
                var final = resultCmp.get("v.value");

                //tried this as well, same error
                //var nameGrab = component.find("cardform");
                //var nameGrab2 = nameGrab.get("v.value");
                //console.log(nameGrab2);

            }
        })
5
  • 1
    Your answer is here : salesforce.stackexchange.com/questions/144129/… you cannot use getsource() with lightning:button try event.currentTarget.label
    – Rao
    Oct 6, 2017 at 20:09
  • @Rao when I do evt.currentTarget.label or evt.currentTarget.value, etc, I get undefined, which is the other problem I cannot seem to get around. I was trying to follow the example here (resulting in same error) as well: trailhead.salesforce.com/modules/lex_dev_lc_basics/units/… but just cannot seem to get anything to work...
    – Genko
    Oct 6, 2017 at 20:32
  • Are you embedding this component inside an object app builder or are you just using an aura:application and clicking on the preview?
    – Rao
    Oct 6, 2017 at 20:37
  • I just tested this in dev box winter 18 , var selected = evt.getSource().get("v.label"); alert(selected); returns the button label
    – Rao
    Oct 6, 2017 at 20:44
  • can you post your apex controller to see what data looks like?
    – Rao
    Oct 6, 2017 at 20:51

1 Answer 1

3

Duh you are going to love this, your issue is not with evt.getSource().get("v.label") this works as expected, server side controller is Javascript so case sensitivity is a big deal here:

Your component has : cardform ( f small letter)

<lightning:input label="Card Expiration Month"
                aura:id="**cardform**"
                name="cardMon"
                placeholder="{!v.cardExpMonth}"

Your controller has: cardForm ( F capital)

var resultCmp = cmp.find("cardForm");

change this to and you will see the error resolve

var resultCmp = cmp.find("cardform");
2
  • 1
    You know, I was certain I had checked that. You'll notice in the commented out section I had. Apparently I didn't change it back.... odd. Well, I can now log to console the result of json.stringify(cmp.find('cardform')); It's an empty array, despite having values in the input fields. But it's a step in the right direction. Thanks for the help!
    – Genko
    Oct 6, 2017 at 21:47
  • Check the data that is coming back from the apex controller, I was not sure I cooked up a data wrapper class and passed it to the controller while this issue was related to case sensitivity.
    – Rao
    Oct 6, 2017 at 21:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .