1
<template>
    <div class="container-wrapper">
            <div if:false={loggedIn} class="slds-m-around_medium">
                    <span>Login to Salesforce App</span>
                    <lightning-input name='username' label="Username"></lightning-input>
                   <lightning-input type="password" name='password' label="Password"></lightning-input>
                   <br/>
                   <lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
           </div>
</div>
</template>
  login() {
        console.log('login attempt');
        console.log(this.template);
         var Username =this.template.querySelector('input[name="username"]').value;
        var Password =this.template.querySelector('input[name="password"]').value;
        console.log(Password);
        console.log(Username );
}  

values are not getting fetch in username, password variables. this.template.querySelector('input[name="username"]').value is not working.

I have also tried onchange event approach on lightning-input elements, in that case, event.target was undefined? I am stuck not able to read user input.

1 Answer 1

2

The problem is that the name attribute is not placed on the lightning-input element but on the internal input element.

Instead, you can add data-attributes to your input elements.

Then you can use this.template.querySelector("lightning-input[data-anyName=anyValue]").value to get the entered text.

Here is a playground link to visualize this.

<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);
    }  

}


Or another approach. Here is the playground link

<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

import { LightningElement, track } from 'lwc';

export default class App 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);
    }  

}

5
  • event.target is undefined for me. Commented Oct 31, 2019 at 12:59
  • here is a playground link. Try to enter a username and password and click on the Login button and look in the console
    – dibocor
    Commented Oct 31, 2019 at 13:07
  • @Ajay do you still have a problem?
    – dibocor
    Commented Oct 31, 2019 at 16:22
  • yes, its not working yet...event.target is undefined. Commented Nov 1, 2019 at 7:56
  • @Ajay Kelkar, I updated my answer adding more explanation
    – dibocor
    Commented Nov 1, 2019 at 12:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .