How to handle multiple lightning-input with a Single onchange event handler in Lightning Web Component?

lightning-input component is widely used in lightning web components. As a Salesforce Lightning developer, we are more interested in knowing how to handle multiple lightning-input with a single onchange event handler in Lightning Web Component? This component supports HTML5 input types, including checkbox, date, datetime, time, email, file, password, search, tel, url, number, radio, toggle. The default is text.

DO YOU KNOW HOW TO GET FIELD VALUE OF LIGHTNING-INPUT IN LIGHTNING WEB COMPONENT USING ONCHANGE EVENT?

Let’s create a Lightning web component where all types of lightning-input will be used and will have same onchange handler defined on each of them to fetch the value dynamically and store the same in property defined.

Let’s see a sample markup for lightning-input of type number and checkbox. We are going to assign a data-id in the component.

<lightning-input data-id="numberField" type="number" onchange={handleChange} label="Enter a number"></lightning-input>
<lightning-input data-id="checkboxField" type="checkbox" onchange={handleChange} label="Basic option"></lightning-input>

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

It has a standard event named onchange event which gets fired whenever field value changes. event.target.value returns the field value of lightning-input dynamically for all the field types except checkbox, checkbox-button and toggle lightning-input component. When you want to get field value of checkbox, checkbox-button and toggle fields, you need to use event.target.checked instead of event.target.value.

Hence, In the event handler, we are explicitly checking the field type and assigning the value based on it.

 numberFieldValue;  
 checkBoxFieldValue; 
 handleChange(event){
        var value;
        if(event.target.type === 'checkbox' || event.target.type === 'checkbox-button' || event.target.type === 'toggle'){
            value = event.target.checked;
        }else{
            value = event.target.value;
        }
        if(event.target.dataset.id === 'numberField'){
            this.numberFieldValue = value;
        }else if(event.target.dataset.id === 'checkboxField'){
            this.checkBoxFieldValue = value;
        }
  }

Check the full code here. The html file has below code:-

<template>
    <lightning-card title="Date Field">
        <lightning-input data-id="dateField" type="date" onchange={handleChange} label="Enter a date"></lightning-input>
        <p slot="footer">Date Field Value is:- {dateFieldValue}</p>
    </lightning-card>
    <lightning-card title="Date Time Field">
        <lightning-input data-id="datetimeField" type="datetime" onchange={handleChange}  label="Enter a date/time value"></lightning-input>
        <p slot="footer">Date Time Field value is:- {dateTimeFieldValue}</p>
    </lightning-card>
    <lightning-card title="Time Field">
        <lightning-input data-id="timeField" type="time" onchange={handleChange} label="Enter a time"></lightning-input>
        <p slot="footer">Time Field value is:- {timeFieldValue}</p>
    </lightning-card>
    <lightning-card title="Color Field">
        <lightning-input data-id="colorField" type="color" onchange={handleChange} label="Favorite color"></lightning-input>
        <p slot="footer">Color value is:- {colorFieldValue}</p>
    </lightning-card>
    <lightning-card title="File Upload Field">
        <lightning-input data-id="fileField" type="file" onchange={handleChange} label="Attachment"></lightning-input>
        <p slot="footer">File Name is:- {fileUploadValue}</p>
    </lightning-card>
    <lightning-card title="Text Field">
        <lightning-input data-id="textField" type="text" onchange={handleChange} label="Enter some text"></lightning-input>
        <p slot="footer">Text Field Value is:- {textFieldValue}</p>
    </lightning-card>
    <lightning-card title="Email Field">
        <lightning-input data-id="emailField" type="email" onchange={handleChange} label="E-mail address"></lightning-input>
        <p slot="footer">Email Field Value is:- {emailFieldValue}</p>
    </lightning-card>
    <lightning-card title="password Field">
        <lightning-input data-id="passwordField" type="password" onchange={handleChange} label="Enter your password"></lightning-input>
        <p slot="footer">Password Field Value is:- {passwordFieldValue}</p>
    </lightning-card>
    <lightning-card title="Phone Field">
        <lightning-input data-id="phoneField" type="tel" onchange={handleChange} label="phone field">
        </lightning-input>
        <p slot="footer">Phone Field Value is:- {phoneFieldValue}</p>
    </lightning-card>
    <lightning-card title="URL Field">
        <lightning-input data-id="urlField" type="url" onchange={handleChange} label="Enter a URL"></lightning-input>
        <p slot="footer">Url Field Value is:- {urlFieldValue}</p>
    </lightning-card>
    <lightning-card title="Numnber Field">
        <lightning-input data-id="numberField" type="number" onchange={handleChange} label="Enter a number"></lightning-input>
        <p slot="footer">Number Field Value is:- {numberFieldValue}</p>
    </lightning-card>
    <lightning-card title="checkbox Field">
        <lightning-input data-id="checkboxField" type="checkbox" onchange={handleChange} label="Basic option"></lightning-input>
        <p slot="footer">Check Box Field Value is:- {checkBoxFieldValue}</p>
    </lightning-card>
    <lightning-card title="Checkbox Button Field">
        <lightning-input data-id="checkbox-buttonField" type="checkbox-button" onchange={handleChange} label="Input One"></lightning-input>
        <p slot="footer">Check Box Button Field Value is:- {checkBoxButtonFieldValue}</p>
    </lightning-card>
    <lightning-card title="Toggle Field">
        <lightning-input data-id="toggleField" type="toggle" onchange={handleChange} label="Basic option"></lightning-input>
        <p slot="footer">Toggle Field Value is:- {toogleFieldValue}</p>
    </lightning-card>
    <lightning-card title="Search Field">
        <lightning-input data-id="searchField" onchange={handleChange} label="Search when user hits the 'enter' key" type="search">
        </lightning-input>
        <p slot="footer">Toggle Field Value is:- {searchFieldValue}</p>
    </lightning-card>
</template>

And the js file of the component has the onchange handlers defined in the html markup:-

import { LightningElement } from 'lwc';

export default class InputText extends LightningElement {
    dateFieldValue;
    dateTimeFieldValue;
    timeFieldValue;
    colorFieldValue;
    fileUploadValue;
    textFieldValue;
    emailFieldValue;
    passwordFieldValue;
    phoneFieldValue;
    urlFieldValue;
    numberFieldValue;
    checkBoxFieldValue;
    checkBoxButtonFieldValue;
    toogleFieldValue;
    searchFieldValue;
    handleChange(event){
        var value;
        if(event.target.type === 'checkbox' || event.target.type === 'checkbox-button' || event.target.type === 'toggle'){
            value = event.target.checked;
        }else{
            value = event.target.value;
        }
        if(event.target.dataset.id === 'dateField'){
            this.dateFieldValue = value;
        }else if(event.target.dataset.id === 'datetimeField'){
            this.dateTimeFieldValue = value;
        }else if(event.target.dataset.id === 'timeField'){
            this.timeFieldValue = value;
        }else if(event.target.dataset.id === 'colorField'){
            this.colorFieldValue = value;
        }else if(event.target.dataset.id === 'fileField'){
            this.fileUploadValue = value;
        }else if(event.target.dataset.id === 'textField'){
            this.textFieldValue = value;
        }else if(event.target.dataset.id === 'emailField'){
            this.emailFieldValue = value;
        }else if(event.target.dataset.id === 'passwordField'){
            this.passwordFieldValue = value;
        }else if(event.target.dataset.id === 'phoneField'){
            this.phoneFieldValue = value;
        }else if(event.target.dataset.id === 'urlField'){
            this.urlFieldValue = value;
        }else if(event.target.dataset.id === 'numberField'){
            this.numberFieldValue = value;
        }else if(event.target.dataset.id === 'checkboxField'){
            this.checkBoxFieldValue = value;
        }else if(event.target.dataset.id === 'checkbox-buttonField'){
            this.checkBoxButtonFieldValue = value;
        }else if(event.target.dataset.id === 'toggleField'){
            this.toogleFieldValue = value;
        }else if(event.target.dataset.id === 'searchField'){
            this.searchFieldValue = value;
        }     
    }
}

Demo – handle multiple lightning-input with a Single onchange event handler in Lightning Web Component

Check this playground to see how it works. Playground lets you write JavaScript, HTML, and CSS code, and preview the output in the interactive code editor.