Как изменить значение поля input, после сохранение старое значение восстанавливается?

Question

[likilix]

Я в JavaSctript и HTML совершенно не разбирюась. Но в данный момент есть необходимость в написании рашсширения для хрома, в задачу которого входи найти тест в input и заменить его.

Замену текста я делаю так,
$(“[xm-name=id_10] input”).value = ‘12212’
текст меняется в поле, но после нажатия кнопки "Сохранить" возвращается прежний текст.

Если менять текст в самом input то после сохрарения тест сохраняется, тот который был введен.

Примерная иерархия контейнеров. У тегов ID не задан

<div xm-name="id_10">
  <input type=text value="путь"/>
</div>

Comments

[VoidVolker]

likilix полный код примера в песочнице codepen/jsfiddle в студию, будьте любезны.

[likilix]

VoidVolker,

[VoidVolker]

likilix, и чего мне предлагаете делать с этим вашим скриншотом? https://qna.habr.com/help/rules#3.8 будьте любезны прочитайте, осознайте и примените на практике.

[likilix]

VoidVolker, мне код не скопировать. он удаленно на сервере находится. с него нельзя скопировать

[VoidVolker]

likilix, ну, что поделать. Без полного кода примера вам никто и никак не поможет. Кроме того, приведённый пример JS кода не валидный.

[likilix]

VoidVolker,
вот мое решение

const el1 = document.querySelector(‘div[xm-name=”id_10”]’);
const el2 = el1. querySelector(‘input’);
el2.value = ‘1-8 путь’;
el2.dispatchEvent(new Event(“change”));

[VoidVolker]

likilix,

1. Ваш код не является валидным и поэтому не будет работать - любой редактор кода или попытка его выполнить сразу укажет на ошибки
   
2. Повторюсь ещё раз: будьте любезны сделать стандартную песочницу в соответствующем теге и привести полный пример, где у вас и чего не работает
   

[likilix]

VoidVolker, я проверил. все работает

[VoidVolker]

likilix, ну раз работает, то и отлично!

Answer 1

[alexalexes]

Многие формы уже не работают на голом JS, если они используют фреймворк с реактивностью (например, Vue).
Это значит, что мало записать что-то в атрибут тега, нужно еще поджечь некое событие, чтобы фреймворк, который подписан событийно на изменения состояния тега, мог это состояние передать во внутренний объект.
Как правило, при submit-е реактивной формы передаются не сами значения input-ов, а состояние внутреннего объекта формы.
В вашем случае нужно попробовать поджечь события, которые запускаются при ручном изменении поля ввода:

let el1 = document.querySelector('div[xm-name="id_10"]');
el1.value = '1-8 путь';
// нужно поджечь такие события, которые возникают при ручном вводе:
el1.onchange();
el1.oninput();

PS: Какие-то странные у вас кавычки, запяточенные. Обычно, для JS используют прямые кавычки.
Это ‘ ’ ” “ заменить на ' ' " ".

Answer 2

[Евгений]

Попробуйте так:
$("[xm-name=id_10] input").attr("value", "12212");
или так:
$("[xm-name=id_10] input").prop("value", "12212");