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
Ajay KelkarAjay Kelkar 

salesforce lightning this.template.querySelector not working

<template>
<div if:false={loggedIn} class="slds-m-around_medium"> <span>Login to Salesforce App</span> <div>
<lightning-input data-username='username' label="Username"></lightning-input>
<lightning-input type="password" data-password='password' label="Password">
</lightning-input> <br/>
<lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
</div>
</div>
</template>

JS

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement
{
loggedIn = false;
username = '';
password = '';
login()
{
this.username = this.template.querySelector("lightning-input[data-username]").value;
this.password = this.template.querySelector("lightning-input[data-password]").value
console.log("Username>> ", this.username); console.log("Password>> ", this.password);
}
}
Maharajan CMaharajan C
Hi Ajay,

Try the below way:

HTML:

<template>
    <div if:false={loggedIn} class="slds-m-around_medium"> <span>Login to Salesforce App</span> <div>
        <lightning-input data-field="username" label="Username"></lightning-input>
        <lightning-input type="password" data-field="password" label="Password">
        </lightning-input> <br/>
        <lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
        </div>
    </div>
</template>


JS:  (Copy the below entire js file below. Below first line also required to Print the Console)

/* eslint-disable no-console */
import { LightningElement } from 'lwc';
export default class forumLWC extends LightningElement {
    loggedIn = false;
    username = '';
    password = '';
    login()
    {
    this.username = this.template.querySelector("[data-field='username']").value; 
    this.password = this.template.querySelector("[data-field='password']").value
    console.log("Username>> ", this.username); 
    console.log("Password>> ", this.password);
}
}



Thanks,
Maharajan.C
 
Ajay KelkarAjay Kelkar
Its not working .. i have coded as you suggested. What could be the cuase , it runs inside utlity popout.  
User-added image
 
Maharajan CMaharajan C
It will work Ajay . Because i have tested and it's working fine in Lightning but not in Utility.

Another way you can use the onchange Handlier.

HTML:

<template>
    <div if:false={loggedIn} class="slds-m-around_medium"> <span>Login to Salesforce App</span> <div>
        <lightning-input label="Username" onchange={handleUserName}></lightning-input>
        <lightning-input type="password" label="Password" onchange={handlePassword}>
        </lightning-input> <br/>
        <lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
        </div>
    </div>
</template>


JS:

/* eslint-disable no-alert */
/* eslint-disable no-console */
import { LightningElement } from 'lwc';
export default class forumLWC extends LightningElement {
    loggedIn = false;
    username;
    password;
    handleUserName(event){
        this.username = event.target.value;
        console.log("Username ==>> ", this.username); 
    }
    handlePassword(event){
        this.password = event.target.value;
        console.log("password ==>> ", this.password); 
    }
    login()
    {
    console.log("Username ==>> ",this.username); 
    console.log("Password ==>> ",this.password);
}
}

Thanks,
Maharajan.C
Ajay KelkarAjay Kelkar
 event.target always null in my case.