В комментах выше вам уже частично ответили, где установить обновление скрытого инпута. Вариант ниже можно использовать, только если у вас нет возможности изменить коллбеки (например библиотек). Но даже библиотеку можно запатчить как вам нужно. Поэтому это только вариант для баловства.
const setter = document.getElementById("set");
const binded = document.getElementById("update");
const hidden = document.getElementById("hidden");
// здесь объявляется ненужная функция слежения за текстовым полем
// это нужно, когда у нас нет возможности влезть в код инпута-сеттера
// и определить свой input listener
const observerFn = (list, observer) => {
list.forEach(mutation => {
if (mutation.type === 'childList') {
const [removed] = mutation.removedNodes;
const [added] = mutation.addedNodes;
if (added) {
hidden.value = added.wholeText;
} else if (removed) {
hidden.value = '';
}
}
});
};
// Здесь начинается абсолютно ненужное слежение на текстовым полем
const observer = new MutationObserver(observerFn);
observer.observe(binded, { childList: true });
setter.addEventListener("input", ({ target }) => {
// Здесь вместе с установкой текста в div, нужно обновлять input[type=hidden]
// Раскомментировать строку ниже и убрать полностью бесполезный код MutationObserver
// hidden.value = target.value;
binded.textContent = target.value;
});
// Это событие нужно, если у нас в поле инпута уже было значение
setter.dispatchEvent(new CustomEvent("input"));
<input type="text" id="set" value="test">
<div id="update">Placeholder</div>
<input type="hidden" id="hidden">
div
? Там же, где Вы задаёте текст дляdiv
-а, там же сразу задавайте и дляinput
-а.input
слушай событиеinput
илиchange
.