Предварительная загрузка текста в текстовое поле для редактирования и отправки пользователем показывает текст на короткое время, а затем пропускается. Зачем?

Question

Я пишу функцию редактирования (plain javascript & HTML / Chrome / Windows 10).

Данные находятся в localStorage в виде серии записей, всего 2 записи в коде игрушки, упомянутом ниже.

Я хочу, чтобы пользователь указал номер записи для редактирования, тогда код должен предварительно заполнить поле textarea полученным содержимым этой записи. Я хочу разрешить пользователю вносить изменения, а затем нажимать кнопку Store, чтобы сохранить его обратно в localStorage.

Моя проблема в том, что когда я предварительно заполняю поле ввода, я на короткое время вижу содержимое записи, а затем поле ввода очищает. Я пробовал .value и .defaultValue

editField.value = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");

и

editField.defaultValue = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");

результат такой же. (Регулярное выражение должно скрыть порядковый номер)

Код здесь находится в JSFiddle: https://jsfiddle.net/roygrubb/zxedbfqr/2/

Это работает более или менее одинаково - оно показывает значение кратко - но затем делает что-то другое: оно переходит к 404. Я тоже этого не понимаю ¯_ (ツ) _ / ¯

То, что я пытаюсь сделать, кажется таким базовым c, что я думаю, что упускаю что-то совершенно очевидное.

Что я упустил? Спасибо!

Answer 1

Всякий раз, когда у вас есть <form>, который вы хотите обработать через JavaScript, вы должны убедиться, что действие отправки формы по умолчанию не выполняется. Если <form> не имеет атрибута «действие», по умолчанию выполняется перезагрузка текущей страницы.

По умолчанию предполагается, что элемент <button> имеет тип «submit». Поэтому, чтобы предотвратить отправку формы, проще всего сделать кнопку с типом «button».

Это может быть не все, что вам нужно сделать, в зависимости от деталей формы. Может быть необходимо (или просто хороший защитный ход) иметь обработчик для события "submit" в форме, чтобы предотвратить действие по умолчанию.