Показать сообщение отдельно
  #13 (permalink)  
Старый 08.09.2019, 15:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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
Ответить с цитированием