Resetting input field values can be done in two ways inside an LWC either by Resetting the input-field value to Null or to its default value.

If you use an HTML button element within the form to perform an action such as resetting the field values, specify the type=” reset”.

 

Using type=”reset” on a button resets the value to null but it is always preferable to get the default value.

So, in this example, we will see how we can Reset the input-field value to its default value using a button. Let’s start!

lightningInputExample.html

HTML file contains two lightning-input tags that create input for email and mobile. The template includes two lightning-button.

The first button (Next) is used to pass the value to JavaScript Component, whereas the second button (Cancel) is used to reset the input fields.

Code

lightningInputExample.js

Use variables from the LWC controller to get and set the email and Mobile values when a user clicks on the Cancel button.

Code

LightningInputExample.js-meta.xml

This configuration file makes the component available for all Lightning page types

Output:

Component

Adding value

After cancel button

Conclusion:

So, there you have it! With the solution shared here, we hope you can easily reset the input Field on Button Click in LWC. Catch us up with another thoughtful Salesforce development solution coming soon. Till then, Happy learning!!

Related Articles

In this detailed guide, we will walk you through the significant yet easy steps to configure Email to Salesforce. Without any further ado, let’s get started! About Email to Salesforce As the term refers, Email to Salesforce is valuable for any organization that businesses use as their Customer Relationship Management (CRM) platform. It helps streamline […]

Read More
Guide on CRUD Operations in Node.js with jsForce

CRM developers typically need to integrate Salesforce with Node.js apps. One well-known library for this purpose is jsForce, which provides a comprehensive set of tools for interacting with Salesforce data and performing CRUD tasks effectively. Let’s dive into the blog, where you will understand the use of jsForce to execute key CRUD tasks within Salesforce, […]

Read More
How to Implement Round Robin Assignments in Salesforce Using Apex

Ensuring a proper workload balance and quick follow-ups from internal or external team members, leads, opportunities, or task distributions is crucial. To achieve this, all you need is a Round Robin assignment. In this step-by-step guide, we will walk you through the process of implementing a round-robin assignment in Salesforce using Apex. Here, we’ve used […]

Read More
Best Salesforce Developments Services Provider

In this step-by-step guide, we will walk you through the significant role of Large Data Volumes in Salesforce, and what strategies or practices you should keep in mind. What is Large Data Volumes? In Salesforce, Large Data Volumes (LDV) refers to managing a huge amount of records available in the platform. LDV usually comes into […]

Read More

Salesforce Apex includes numerous built-in text handling classes, and in addition to them, the Pattern and Matcher classes are good for performing complex string operations. These classes enable us to define and work with regular expressions, which are of particular importance for data validation, searching, and modification. In this technical blog, we will find out […]

Read More

Maintaining security and compliance in Salesforce requires effective user access management. This article will lead you through the process of creating expiration dates for Permission Sets and Permission Set Groups, allowing you to automate access removal while minimizing manual work. Know how this functionality simplifies workflows, guarantees compliance, and improves security procedures. Why Use Expiration […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818