Lefseq, я ответил на ваш вопрос...
|
Сообщение от Lefseq
|
Malleys,
Код рабочий, но нужно кое что исправить. Буду признателен, если поможете.
1. Нужно убрать на страницах кнопку/функцию "Забудь обо мне!"
2. Надо чтобы введенные пользователем имя (name) и фамилия (family-name) выводились на странице next.html по отдельности, чтобы можно было поставить их в разные части страницы.
|
Тогда страница с формой выглядит так...
<section id="user-greeting">
<form action="next.html">
<label>
Имя
<input autocomplete="name" name="name" required>
</label>
<label>
Фамилия
<input autocomplete="family-name" name="familyName" required>
</label>
<button>Запомнить</button>
</form>
</section>
<script>
(function main() {
var form = document.querySelector("#user-greeting > form");
form.addEventListener("submit", function(event) {
event.preventDefault();
var data = new FormData(form);
localStorage.name = JSON.stringify(Object.fromEntries(data));
form.submit();
});
})();
</script>
Т. е. форму по любому нужно отправить, только перед отправкой надо сохранить данные формы в локальном хранилище. Адрес на который нужно перейти, указывается в атрибуте action. На странице next.html вы можете работать со значениями из локального хранилища.
Тогда страница next.html может выглядеть так...
<h3>Привет, <span data-field="name"></span>, добро пожаловать на сайт!
</h3>
<p>Привет, <span data-field="name"></span> <span data-field="familyName"></span>. Мы вас ждали.</p>
<p>Как видите, <span data-field="name"></span>, страница называет вас
по имени. Ваше имя (<i data-field="name"></i>) и фамилия (<i data-field="familyName"></i>)
были сохранены в локальном хранилище, поэтому теперь их можно было использовать.
</p>
<button onclick="delete localStorage.name; location.reload();">Забыть меня</button>
<script>
document.addEventListener("DOMContentLoaded", function() {
if("name" in localStorage === false) return location.replace("./");
const data = JSON.parse(localStorage.name || "{}");
for(const [key, value] of Object.entries(data)) {
for(const node of document.querySelectorAll(`[data-field="${key}"]`)) {
node.textContent = value;
}
}
});
</script>
В <span data-field="name"></span> подставляется значение из отправленной формы. Значению data-field соответствует имя поля из формы.
Рабочий пример на основе этого кода вы можете посмотреть тут...
https://charm-launch.glitch.me/localstorage
|
Сообщение от laimas
|
|
Для этого достаточно:
|
А зачем вам атрибут required без формы? Оно так не работает!
|
Сообщение от laimas
|
|
ваша форма нафиг не нужна
|
Почему вы решили, что данные формы нужны только для того, чтобы их отправить обрабатывать в текстовый препроцессор PHP?
Форма нужна для проверки. Форма нужна для связности, чтобы пользователь мог по порядку заполнить поля без необходимости поиска следующего поля. Это громадное улучшение UX.
|
Сообщение от laimas
|
|
А уж по каким правилам проверять, это уже не мне решать, тем более, что по логике все это похоже на бред.
|
Всё уже стандартизировано, никаких костылей изобретать не нужно. (атрибут pattern)
|
Сообщение от laimas
|
|
А это полная хрень
|
Мир не ограничен Windows
Но, вся эта хрень (не в плане кода, а как результат вашей хотелки) вам написанная с успехом скушает и ввод одних пробелов полях, и даже не заикнется об ошибках. А вот логика во втором варианте "действий" (#13) уже какая-то есть, в отличие от ахинеи первого.
