Получение значения радиокнопки, установленного автозаполнением браузера

У меня возникают проблемы с получением текущего состояния поля ввода переключателя, которое находится на странице, которая ранее отображалась браузером. Сценарий таков:

  • Страница, содержащая элемент ввода, визуализируется с первым переключателем в группе, имеющим атрибут «проверено».
  • Пользователь выбирает другой переключатель (например, третий вариант), а затем переходит на другую страницу.
  • Пользователь нажимает кнопку «Назад» в браузере, чтобы повторно отобразить страницу.

На этом этапе автозаполнение браузера установило, что третий переключатель отображается как выбранный, но первый переключатель по-прежнему имеет атрибут «проверено». Это означает, что любой javascript, пытающийся получить текущее выбранное значение переключателя, возвращает значение первого элемента ввода, а не третьего (которое выбрано визуально).

Кто-нибудь знает, какой javascript можно использовать для возврата визуально выбранного переключателя, а не элемента с атрибутом «проверено»?

ПРИМЕЧАНИЕ. Я знаю, что могу отключить это, используя autocomplete="off" в элементе ввода, но было бы неплохо иметь возможность сохранить выбор переключателя, так как в противном случае автозаполнение немного бессмысленно в сценарии с использованием javascript.

На самом деле я использую jQuery в своем живом приложении, поэтому решение jQuery или javascript будет приемлемым.

Вот некоторый базовый HTML-код, демонстрирующий проблему. Вам нужно будет сохранить следующее в локальном файле .html, загрузить его в браузер, перейти на другую страницу, а затем нажать «назад», чтобы увидеть проблему.

<html>

<head></head>

<body>

    <h1>Radio test</h1>

    <label>
        <input name="test" type="radio" value="1" checked>
        Value 1
    </label>
    <label>
        <input name="test" type="radio" value="2">
        Value 2
    </label>
    <label>
        <input name="test" type="radio" value="3">
        Value 3
    </label>

    <div id="message"></div>
</body>

<script lang="javascript">

    var rv = document.querySelector('input[name="test"]:checked').value;
    document.getElementById("message").innerText = rv;

</script>

</html>

Если вы загрузите страницу, она будет выглядеть так:

РадиоТест1

Выберите «Значение 3», перейдите на другую страницу (например, из закладки или введите URL-адрес), а затем нажмите кнопку «Назад». Теперь на странице будет отображаться следующее:

введите здесь описание изображения

то есть переключатель «Значение 3» кажется выбранным, но получение значения с использованием javascript по-прежнему показывает, что выбрано «Значение 1» (поскольку это элемент с атрибутом «checked»).


javascript browser html autocomplete radio-button
person Jon Knight    schedule 13.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Браузер восстанавливает предыдущее состояние формы, когда вы возвращаетесь назад. Но это происходит после того, как ваш код выполнен.

Что вы можете сделать, так это прослушать Window::pageshowсобытие. Это гарантирует, что ваш скрипт готов прочитать окончательное проверенное состояние:

window.onpageshow = () => {
  var rv = document.querySelector('input[name="test"]:checked').value;
  document.getElementById("message").innerText = rv;
};
person yurzui    schedule 13.08.2020
comment
Спасибо @yurzui. Это устраняет проблему, о которой я сообщал, но теперь я понимаю, что моя настоящая проблема связана с jQuery. Весь наш код использует стандартное событие 'document.ready' для инициализации (которое, по-видимому, рекомендуется во всей документации jQuery), но когда речь идет о переключателях и автозаполнении, кажется, что вместо этого мы должны использовать окно pageshow. - person Jon Knight; 17.08.2020