Как сохранить заполненные формы ввода после загрузки страницы? - PullRequest
Новая
       7

Как сохранить заполненные формы ввода после загрузки страницы?

0 голосов
/ 06 июня 2019

Я хотел бы оставить поля формы заполненными после нажатия кнопки «Отправить». Я заметил, что при загрузке страницы мои поля очищаются, и я хотел бы, чтобы они сохранили данные, которые я предоставил ранее. (Я чувствую, что браузеры использовали это по умолчанию.) Есть ли простой способ сделать это?

Прямо сейчас я использую действие GET, чтобы я мог видеть все свои данные, и моя страница представляет собой простой файл HTML, чтобы упростить его. Я знаю, что могу прочитать весь файл с помощью $ _GET ['what'] и поместить значения обратно в поля формы, но я чувствую, что есть более простой способ сохранить все поля формы заполненными.

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

Моя страница прямо сейчас. У меня есть базовая форма: 

<form name="filter" method="get" action="">
<input type="text" name="s" value="" /><br />
<select id="location">
    <option value="school">School</option>
    <option value="work">Work</option>
    <option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go &#10151;" />
</form>

Я предоставлю некоторые значения, отправлю (что снова загружает страницу), и они будут пустыми. Он отлично передает мои переменные в URL, но я бы хотел, чтобы поля оставались заполненными.

1 Ответ

1 голос
/ 07 июня 2019

Во-первых, вы можете использовать autocomplete = "on" внутри тега <form>, чтобы обеспечить возможность выбора текста из выпадающего меню, которое создает браузер 

<form name="filter" method="get" action="" autocomplete="on">
<input type="text" name="s" value="" /><br />
<select id="location">
    <option value="school">School</option>
    <option value="work">Work</option>
    <option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go &#10151;" />
</form>

Хотя это работает для текстовой информации (не настоящее автоматическое заполнение, но хорошее и простое в использовании), это не будет работать для параметров и меток

Если эта неспособность нарушает условия сделки, вы можете попытаться сохранить свои данные в файле cookie, используя JavaScript, когда пользователь нажимает кнопку "Отправить". Затем, когда страница перезагружается, используйте JavaScript, чтобы установить значение вашей формы, если cookie существует.

Рекомендации / полезная информация:

Где вы можете узнать больше об автозаполнении: https://www.w3schools.com/tags/att_form_autocomplete.asp

Для установки флажка при загрузке в: Установите / снимите флажок с помощью JavaScript (jQuery или Vanilla)?

Для загрузки содержимого после загрузки страницы: JavaScript, который выполняется после загрузки страницы

Для сохранения в флажке: Получить значение флажка?

Примечание: у вас есть другой метод ... как ваш GET, это просто печенье, это первое, что приходит на ум.

...