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
Traveling SpoonTraveling Spoon 

Lightning: clear button not clearing text field

I'm building an app with basic form using Lightning, the Submit button works, but the Clear button doesn't work - it's supposed to clear the field after user enters name and hit submit. Please advise what I missed. thanks.

HelloWorld.cmp:
<aura:component implements="force:appHostable" access="global">
    
    <ui:inputText aura:id="name" label="Find My TravelingSpoon:"/>
    <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" 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>

HelloWorldController.js:
({
    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);
    }
 clearName : function(cmp, evt) {
    var myName v= cmp.set("outName", []);
}    
})

User-added image
EnreecoEnreeco
I think this line is not correct 
var myName v= cmp.set("outName", []);

You should do something more plain like: 
<aura:Attribute name="outputValue" type="String" default="" />
//. . .
<ui:outputText aura:id="outName" value="{!v.outputValue}" class="text"/>
and
  
...
clearName : function(cmp, evt) {
    cmp.set("v.outputValue", "");
}
...
Or simply: 
... 
clearName : function(cmp, evt) { 
   
cmp.find("outName").set("v.value", "");

} 
...


 
Traveling SpoonTraveling Spoon
Force Logic, per your suggestion, now my HelloWorldController.js is below but still not working - clicking on Clear button still doesn't empty the text field.... Pls. advise

({
    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", "");
}

    }
    )
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 = '';
Samhita ArgulaSamhita Argula
Hi Traveling Spoon,
Your set value thing worked for me, thank you. Not sure why it didnt work for you.
Only difference - i was resetting a lightning:input field.