Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to fire the change event for an input field?
I have added some input to an input field element this way:
const inputFiled = document.querySelector("#example");
inputField.value = "X";
I want to fire a change event for that field right after the input was added.
This is something I want to try after noticing that the input isn't recognized (the form won't be submitted) if added in the above way; rather, it is recognized only by typing/pasting.
How to do that?
2 answers
The following users marked this post as Works for me:
| User | Comment | Date |
|---|---|---|
| user36363 | (no comment) | Dec 3, 2021 at 01:42 |
You can use the dispatchEvent method.
const inputField = document.querySelector("#example");
inputField.value = "X";
inputField.dispatchEvent(new Event('change'));
0 comment threads
from the MDN,
"Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:
-
When the element is :checked (by clicking or using the keyboard) for
input type="radio"andinput type="checkbox"; -
When the user commits the change explicitly (e.g., by selecting a value from a
select's dropdown with a mouse click, by selecting a date from a date picker forinput type="date", by selecting a file in the file picker forinput type="file", etc.); -
When the element loses focus after its value was changed, but not committed (e.g., after editing the value of textarea or
input type="text")."
Inserting a value into an input field with JS also allows us to simply fire another event depending on the kind of input used. For instance, inputField.blur(); triggers the unfocus event which can be used to check the contents of an input type="text"
References:
0 comment threads
1 comment thread