How to pass text input value to js in magento 2 knockout js?

Question

In my template.html file, I am having only the input field. After I complete entering the text in the input field, I need to pass the value to the js file without any button click. How to achieve this using Magento 2 knockout js?

Answer 1

You want to use the value KO binding.

The value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as , and .

When the user edits the value in the associated form control, it updates the value on your view model. Likewise, when you update the value in your view model, this updates the value of the form control on screen.

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
 
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc"), // Prepopulate
    };
</script>

In that example whenever the inputs change the respective KO observable also gets updated.

See https://knockoutjs.com/documentation/value-binding.html for more details.