2

I have a <ui:inputText> in my component. when I try to access the value of the textbox in the client side controller, I get undefined. Should the textbox be within a form?

Component:

<div class="slds-form-element">
<div class="slds-form-element__control">
<label class="slds-form-element__label" for="comments">{!$Label.c.Comments}</label>
<div class="slds-form-element__control">
<ui:inputtextarea aura:id="comments"  class="slds-input" rows="3" value="{!v.comments}" updateOn="keyup"/>
</div>
</div>
</div>
<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.buttonClicked}">Save</button>

Controller:

buttonClicked:function(component, event, helper) {


    var commentsControl = component.find("comments");
    console.log(component.find("comments"));
    console.log("event:"+commentsControl.get("v.value")) ;


}
  • can you please post the complete error message? – glls May 5 '17 at 13:08
  • 2
    there is no error. I get the value as undefined or I get the default value that is set. Unable to read the data that is entered in the textbox. – NewSalesforceDev May 5 '17 at 13:13
  • I have this sort of markup working fine without a form. – Keith C May 5 '17 at 14:22
  • The keyup Event for the textbox was not getting fired because of the Renderer.js file – NewSalesforceDev Jun 12 '17 at 15:54
2

Since you bound the value to "comments":

value="{!v.comments}"

You should have an attribute by the same name:

<aura:attribute name="comments" type="String" />

And in your controller, you can access it directly:

var comments = component.get("v.comments");
console.log("comments: " + comments);
  • 1
    Have an attribute and tried this too. No luck – NewSalesforceDev May 5 '17 at 13:25
  • I recently stumbled upon the same problem. To actually get the value you have to "submit". In my case I'm using a keyup event and it forces me to press Enter to get the value – Javier García Manzano Sep 7 '17 at 15:44
0

I think you forgot to add the attribute named comments of type String:

Component:

<aura:attribute name="comments" type="String" default="" />

<div class="slds-form-element">
    <div class="slds-form-element__control">
        <label class="slds-form-element__label" for="comments">{!$Label.c.Comments}</label>
        <div class="slds-form-element__control">
            <ui:inputtextarea aura:id="comments"  class="slds-input" rows="3" value="{!v.comments}" updateOn="keyup"/>
        </div>
     </div>
</div>

<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.buttonClicked}">Save</button>

Controller:

buttonClicked:function(component, event, helper) {              
    var commentsControl = component.find("comments");
    console.log(component.find("comments"));
    console.log("event:"+commentsControl.get("v.value")) ;          
}

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.