function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
szesze20szesze20 

Lightning Component question: not clearing field upon clicking button

I just started playing with Lightning and have created controller and cmp. Intended behavior:
  1. User enters text in 'Find Travelingspoon' field, click Submit, it displays text 'Hi, [text]' - this part works fine.
  2. When user clicks 'Clear  button on Salesforce1, it clears whatever text is in the 'Find Traveling Spoon' text box, but it's not clearing out the text, the text stays in the box.
Please advise what's wrong. Thanks.

Here's my component code:
<aura:component implements="force:appHostable" access="global">
    
    <ui:inputText aura:id="name" label="Find TravelingSpoon:"/>
    
    <ui:button aura:id="button" buttonTitle="Submit Input" class="button" label="Submit" press="{!c.getInput}"/>
    <ui:outputText aura:id="outName" value="" class="text"/>

    <ui:button aura:id="button" buttonTitle="Clear the field" class="button" label="Clear" press="{!c.clearName}"/>    
    
</aura:component>

Here's my controller code:
({
    getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
        cmp.set("v.value", []);
    }
})

({
    clearName : function(cmp, evt) {
    cmp.find("outName").set("v.value", "");
}

    }
    )
Gaurav KheterpalGaurav Kheterpal
Please refer the solution on this (https://developer.salesforce.com/forums/ForumsMain?id=906F0000000AqaqIAC) thread.

The correct approach is to change your declaration style and the set statements to
  
<aura:Attribute name="outputValue" type="String" default="" />
<ui:outputText aura:id="outName" value="{!v.outputValue}" class="text"/>

clearName : function(cmp, evt) {
    cmp.set("v.outputValue", "");
}

cmp.find("outName").set("v.value", "");

 
szesze20szesze20

thanks Gaurav. I followed your advice and modified to the following, however, it's still *not* clearing the text in 'Find TravelingSpoon' text box when I click 'Clear' button. Please advise.

My updated component and controller code is below: 
<aura:component implements="force:appHostable" access="global">
    
    <ui:inputText aura:id="name" label="Find TravelingSpoon:"/>
    
    <ui:button aura:id="button" buttonTitle="Submit Input" class="button" label="Submit" press="{!c.getInput}"/>
    <aura:Attribute name="outputValue" type="String" default="" />
    <ui:outputText aura:id="outName" value="{!v.outputValue}" class="text"/>

    <ui:button aura:id="button" buttonTitle="Clear the field" class="button" label="Clear" press="{!c.clearName}"/>    
    
</aura:component>


({
    getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
        cmp.set("v.value", []);
    }
})

({
  clearName : function(cmp, evt) {
    cmp.set("v.outputValue", "");
}

cmp.find("outName").set("v.value", "");
}

    }
    )

 
Amar #LightningAmar #Lightning
I think there is syntactical error in your client side controller. I believe ,in your case clearName method is not working. You can fire an alert within clearName function to debug it. Here is the tested code which is working for me. Replace your controller with this source code.

({
     getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
        cmp.set("v.value", []);
      },    //Put comma here
    
       clearName : function(cmp, evt) {
         cmp.find("outName").set("v.value", "");
      }
})

 
Aman Agarwal 1Aman Agarwal 1
On the browser look for the id for your input component or set an id for that component yourself.
For Example: This was the id for my components input field : "SearchManager_typeaheadlookup" 
<input class="typeaheadlookup slds-input tt-input" type="text" name="SearchManager_typeaheadlookup" id="SearchManager_typeaheadlookup" data-aura-rendered-by="434:0" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
And now on the controller use the following code to set the value to null. 
document.getElementById('SearchManager_typeaheadlookup').value = '';