Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.09.2019, 15:37
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от laimas
У вас что эксклюзивный браузер? Под каким проверяете?
Opera 63.0.3368.71
Ответить с цитированием
  #12 (permalink)  
Старый 08.09.2019, 15:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Malleys
Форма нужна для проверки.
Это да, иначе внутренняя проверка работать не будет.

Сообщение от Malleys
Форма нужна для связности, чтобы пользователь мог по порядку заполнить поля без необходимости поиска следующего поля.
А это полная хрень, ибо само действо на странице бред полнейший, если серверу этого не нужно. Зачем вообще ради этого пустяка два поля? А показать/разукрасить ошибку можно и без внутренней проверки.
Ответить с цитированием
  #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
Ответить с цитированием
  #14 (permalink)  
Старый 08.09.2019, 15:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Вот в Опере

Последний раз редактировалось laimas, 12.10.2020 в 16:58.
Ответить с цитированием
  #15 (permalink)  
Старый 08.09.2019, 15:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Malleys
Почему вы решили, что данные формы нужны только для того, чтобы их отправить обрабатывать в текстовый препроцессор PHP?
Я ничего не решил, я просто вижу полную дурь, это как если бы я утром ради выпить чашку кофе обязательно бы отправлялся в ресторан вместо того, чтобы приготовить ее дома.

Я знаю вы любитель мусолить, но это ваше мнение и мне оно пофигу, я лишь высказываю свое.
Ответить с цитированием
  #16 (permalink)  
Старый 08.09.2019, 16:03
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от Malleys
Lefseq, я ответил на ваш вопрос...
Спасибо большое за помощь, теперь все работает.
Ответить с цитированием
  #17 (permalink)  
Старый 08.09.2019, 16:08
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

laimas,
Успокойтесь, Malleys хоть поделился действительно рабочим решением, без упоминания дурь мое ТЗ или не дурь.
Ответить с цитированием
  #18 (permalink)  
Старый 08.09.2019, 16:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Lefseq
Успокойтесь
Я спокоен как танк, мне пофигу что у вас там будет, как говорится "хозяин барин". Но, вся эта хрень (не в плане кода, а как результат вашей хотелки) вам написанная с успехом скушает и ввод одних пробелов полях, и даже не заикнется об ошибках. А вот логика во втором варианте "действий" (#13) уже какая-то есть, в отличие от ахинеи первого.

Последний раз редактировалось laimas, 08.09.2019 в 16:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрыть аккордеон при переходе на другую страницу Роман1479 jQuery 10 23.12.2018 15:30
Как сделать, чтобы скрипт работал с jQuery последней версии? Tass jQuery 2 19.01.2015 12:22
чем заменить onChange? Viral Элементы интерфейса 13 04.12.2011 11:32
Чем можно заменить свойство contentEditable=true ? iMichaeli7 Javascript под браузер 5 20.10.2010 11:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58