Tracking input change in alpine.js

Question

I'm learning alpine.js and trying to capture the user input value. I have used "x-on:input" but its not calling the function

Below is the simple form input

 <input type="email" class="form-control" x-on:input.debounce="validateEmail($event)" x-model="userEmail" id="email" aria-describedby="emailHelp" placeholder="Enter email">

and this is the basic method in my index.js

function validateEmail(event){
console.log(userEmail);

}

The function is not getting called.

Adding a sample stackblitz

Please Guide

Thanks Shruti Nair

Hugo · Accepted Answer · 2021-01-18 10:43:43Z

13

You're looking for x-on:change

<input type="email" class="form-control" x-on:change.debounce="validateEmail($event)" x-model="userEmail" id="email" aria-describedby="emailHelp" placeholder="Enter email">

You'll also want to make your function read the value from $event.target.value

Since you've already got an x-model, you could add $watch('userEmail', (val) => {}) to x-init and validate that way.

Edit: (based on the stackblitz)

x-data is missing
I've inlined all the logic from index.js
forked stackblitz at https://stackblitz.com/edit/web-platform-alpinejs-prwaeg?file=index.html

Full component:

<form x-data="{
  userEmail: '',
  validateEmail(event) {
    console.log(event.target.value);
  },
  submit($event) {
    console.log(this.userEmail)
  }
}">
  <input type="email"  class="form-control"
    x-on:change.debounce="validateEmail($event)"
    x-model="userEmail"
    id="email"
    aria-describedby="emailHelp"
    placeholder="Enter email"/>
  <button type="button" x-on:click="submit" class="btn btn-block">
    Submit
  </button>
</form>

edited Jan 18, 2021 at 10:43

answered Jan 14, 2021 at 7:22

Hugo

3,9381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shruti Nair Over a year ago

:Will you please check this stackblitz.com/edit/web-platform-alpinejs?file=index.html

Hugo Over a year ago

@ShrutiNair I've updated the answer see stackblitz.com/edit/…

Collectives™ on Stack Overflow

Tracking input change in alpine.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related