Till now, we have seen when we want to capture the value of input fields, we have used “onchange” event into the input fields just like
<lightning-input label="Department" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
In this “onchange” event procedure, always we are sending the values from input fields to JS file.
Is there any way to get the values of the input fields in a single shot?
The answer is YES. We can use querySelector() JS function to get a value in a single shot.
Let’s say, we have built a component named “takeUserInput“.
Step 1: As per previous examples, we need to update the “takeUserInput.js-meta.xml” file to set the visibility in Lightning App Builder.
takeUserInput.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="takeUserInput">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Step 2: Need to write the respective HTML file.
takeUserInput.html
<template>
<lightning-card title="Take User Inputs in a Single Shot" icon-name="standard:contact">
<div class="slds-p-around_small">
<lightning-input label="First Name" data-field="FirstName" class="slds-m-bottom_x-small"></lightning-input>
<lightning-input label="Last Name" data-field="LastName" class="slds-m-bottom_x-small" required></lightning-input>
<lightning-button label="Get Values" variant="brand" onclick={takeInputs}></lightning-button>
<div class="slds-p-top_small">
Name: {name}
</div>
</div>
</lightning-card>
</template>
Here, we have defined an attribute as data-field for all the input fields. Through this attribute,data-field, we will capture the input fields directly.
Step 3: Now, we need to work on the JS file.
takeUserInput.js
import { LightningElement,track } from 'lwc';
export default class TakeUserInput extends LightningElement {
firstName;
lastName;
@track name;
takeInputs(){
this.firstName = this.template.querySelector("[data-field='FirstName']").value;
this.lastName = this.template.querySelector("[data-field='LastName']").value;
this.name = this.firstName + " " + this.lastName;
}
}
We have used template.querySelector() JS function in which we have passed the data-field to denote the particular input field and get the value using “this.template.querySelector(“[data-field=’FirstName’]”).value” notation in a single shot.
Step 4: At last, need to add this LWC into Lightning App/Home or Record Page.
Result
22,089 total views, 18 views today
