4

I am learning LWC and I want to pass input text value to controller on a button click. Please help.

Please Note:

I can retrieve the value using onchange function on input as below:

<lightning-input type="text" name="input1" label="Enter a Value" onchange={handleInput}> </lightning-input>

But, I want to retrieve text value on button click:

<lightning-button label="Show Value" onclick={showRefreshVal}></lightning-button>

My code so far:

HTML

<template>
    <lightning-card title="">
        <div class="slds-m-around_medium">
            <lightning-input type="text" name="input1" label="Enter a Value" value={parentVal}> </lightning-input>
            <lightning-button label="Show Value" onclick={showRefreshVal}></lightning-button>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement } from 'lwc';
export default class ApiFunction extends LightningElement {
    parentVal;
    showRefreshVal() {
        // eslint-disable-next-line no-console
        console.log("this.parentVal: ", this.parentVal);
    }
}

OUTPUT

this.parentVal: undefined

Expected OUTPUT

this.parentVal: [value typed on input text]

1 Answer 1

5

Data binding is one way in Lightning. What you want to do is just ask the component what the value is. Here's an example:

<template>
    <lightning-input label="Demo">
    </lightning-input>
    <lightning-button label="Update Value" onclick={updateText}>
    </lightning-button>
    <hr />
    {outputText}
</template>

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track outputText;
    updateText(event) {
        this.outputText = this.template.querySelector('lightning-input').value;
    }
}

We can grab the lightning input via querySelector, then get the .value from there. You can set a name or other unique attribute to find a specific input from the available inputs if you need to.

5
  • Thanks @sfdcfox I have made a small change in the playground, 1. Implemented it with a unique name property. 2. Removed Track from JS, as it's not mandatory. developer.salesforce.com/docs/component-library/tools/… Mar 6, 2020 at 1:41
  • 1
    Alternatively, you could add an onchange / oncommit function attribute to your lightning-input element which would update parentVal. Mar 6, 2020 at 18:11
  • Thanks for the great example! My question is in cases like your example where I want to get the input value in my JS after a button has been clicked, is it the only way? and the best way, to use 'this.template.querySelector()' to get that value? I'm thankful you are in this platform @sfdcfox! Have a great Thanksgiving weekend!!
    – Bahman.A
    Nov 25, 2020 at 23:49
  • 1
    @Bahman.A You can choose to not get the value until you need it; for example, you could do let myValue = this.template.querySelector('lightning-input').value; There's also querySelectorAll if you need to get multiple elements. If you want more than a comment, you can always ask a new question, I'd be happy to take a look at it.
    – sfdcfox
    Nov 26, 2020 at 0:06
  • @sfdcfox thanks for the quick response. I’d like to understand all the different ways I can collect input data in JS after a button click. I understand that this is something I need to create a new question for.
    – Bahman.A
    Nov 26, 2020 at 0:10

You must log in to answer this question.

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