+ 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.