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
MRITYUNJAY PATEL 3MRITYUNJAY PATEL 3 

How to clear the input filed value after clicking the button

Hi Everyone,
i m trying to clear the input field value after clicking the clear button in my code.

 //This is my code aura code
<aura:component controller="AuraApex" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="FirstName" type="String"  />
    <aura:attribute name="LastName" type="String"  />
    <aura:attribute name="AccountList" type="List" />
     <aura:attribute name="NewAccount" type="String" />
    <div>
         <lightning:input type="String" label="FirstName" aura:id="firstn" value="{!v.FirstName}" required="true"/>
         <lightning:input type="String" label="LastName" aura:id="lastn" value="{!v.LastName}" required="true" />
         <div>
        <lightning:select name="select1" label="List Of Existing Account"  aura:id="AccountId"   required="false" >
            <option value="" label="--None--">
                  </option>
            <aura:iteration items="{!v.AccountList}" var="ac" >
                <option value="{!ac.Id}" label="{!ac.Name}" />
            </aura:iteration>
        </lightning:select>
    </div>
        <div>
        <lightning:select name="select2" label="List Of Industry"  aura:id="IndId"   required="false" >
            <option value="" label="--None--">
                  </option>
            <aura:iteration items="{!v.AccountList}" var="in" >
                <option value="{!in.Id}" label="{!in.Industry}" />
            </aura:iteration>
        </lightning:select>
    </div>
        <br/>
        <br/>
        <div class="slds-form-element">
    <label class="slds-checkbox_toggle slds-grid">
      <span class="slds-form-element__label slds-m-bottom_none">New Account Create</span>
       <ui:inputCheckbox change="{!c.selectChange}"/>
      <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-checkbox_on">New</span>
        <span class="slds-checkbox_off">Old</span>
      </span>
    </label>
  </div>
<!--PART 2 : create a Div with slds-hide class, control by toggle checkbox-->        
   <div aura:id="DivID" class="slds-hide">
      <lightning:input type="String" label="Account Name" aura:id="AccountId" value="{!v.NewAccount}"/>
   </div>
        
        <br/>
        <lightning:button variant="brand" label="Submit" title="Brand action" onclick="{! c.handleClick }" />    
        <lightning:button variant="brand" label="clear" title="Brand action" onclick="{! c.clear }" />  
    </div>
</aura:component>

 
Best Answer chosen by MRITYUNJAY PATEL 3
Suraj Tripathi 47Suraj Tripathi 47

Hi,

Please find the solution.

No need to use clear button as with the help of "Submit" you can also clear the field.

First, you get the fields then assign a null value. 

({
	handleClick : function(component, event, helper) {
        var action=component.get("c.forContact");
        action.setParams({
            FN:component.get("{!v.FirstName}"),
            LN:component.get("{!v.LastName}"),
            Eml:component.get("{!v.Email}"),
            Phn:component.get("{!v.Phone}"),
        });
        action.setCallback(this,function(response){
            console.log(JSON.stringify(response.getReturnValue()));
            if(response.getReturnValue()!=null){
                alert("Your Contact is Inserted");
                component.set("v.FromInsertedData", response.getReturnValue().LastName);
            }
        });
        $A.enqueueAction(action);
        
        component.set("v.FirstName", ""); 
        component.set("v.Phone", "");

 	}
})

Please mark it as the Best Answer if it helps you.

Thank You

All Answers

CharuDuttCharuDutt
Hii Mritunjay
Try Below Code JS 
Example
clear : function(cmp, event, helper) {
         cmp.set("v.FirstName",null);
         cmp.set("v.LastName",null);
    },
Please Mark It As Best Answer If It Helps
Thank You!
 
Suraj Tripathi 47Suraj Tripathi 47

Hi,

Please find the solution.

No need to use clear button as with the help of "Submit" you can also clear the field.

First, you get the fields then assign a null value. 

({
	handleClick : function(component, event, helper) {
        var action=component.get("c.forContact");
        action.setParams({
            FN:component.get("{!v.FirstName}"),
            LN:component.get("{!v.LastName}"),
            Eml:component.get("{!v.Email}"),
            Phn:component.get("{!v.Phone}"),
        });
        action.setCallback(this,function(response){
            console.log(JSON.stringify(response.getReturnValue()));
            if(response.getReturnValue()!=null){
                alert("Your Contact is Inserted");
                component.set("v.FromInsertedData", response.getReturnValue().LastName);
            }
        });
        $A.enqueueAction(action);
        
        component.set("v.FirstName", ""); 
        component.set("v.Phone", "");

 	}
})

Please mark it as the Best Answer if it helps you.

Thank You

This was selected as the best answer