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