[SalesForce] Lightning Component: Cannot read property ‘get’ of undefined

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);

            }
        })

Best Answer

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");
Related Topic