Форма html была изменена

События Формы

Рассмотрим основные события форм: отправка формы, очистка полей, фокус элемента формы, потеря фокуса, события для input, select, checkbox и многое другое.

Событие отправки формы

Слушать событие отправки формы можно при помощи submit .

 
 Отправить форму Очистка полей формы 

Чтобы поймать событие отправки формы, используйте submit .

my_form.addEventListener("submit", () => < console.log("Событие отправки формы") >)

Очистка полей формы

Событие очистки полей формы.

my_form.addEventListener("reset", () => < console.log("Событие очистки полей формы") >)

Метод для очистки полей формы.

Невалидность полей формы

Событие invalid срабатывает при попытке отправить форму, когда одно или несколько полей формы неверно заполнены. Или не заполнены, когда поле имеет атрибут required .

my_form.addEventListener("invalid", (e) => < console.log("Значения формы не валидны"); >, true)

Как реализовать проверку правильности ввода данных, можете прочитать в статье про валидацию input.

События input, textarea

На input и textarea можно слушать следующие события:

• input — событие ввода
• change — событие изменения input (срабатывает после изменения поля и потери фокуса);
• focus — выбор элемента, фокус;
• blur — потеря фокуса;
• select — выделение текста;
• keyup — событие отпускание кнопки;
• contextmenu — правый щелчок мыши.

const inputs = document.querySelectorAll(".form-events input"); inputs.forEach(el => < el.addEventListener("change", function () < // ваш код >) >);

Посмотреть когда срабатывают основные события форм, можете ниже.

События select

Для элемента select можем отслеживать следующие события:

• change — выбор элемента из списка (option);
• focus — фокус на select;
• blur — потеря фокуса select.

 Выбор option Фокус select Потеря фокуса select 

my_select.addEventListener("change", () => console.log("Выбран пункт из списка select"));

В примере ниже посмотрите, когда какие события срабатывают для элемента формы select .

Если вам интересно как стилизуется select, вот ссылка на статью.

События checkbox / radio

Для checkbox / radio можно использовать следующие события:

checkb.addEventListener("change", () => console.log(checkb.value)); radio.addEventListener("click", () => console.log(radio.value));

Здесь вам пригодятся знания, как проверить состояние чекбокса.

События range

Для input type range используют следующие события:

• change — происходит в момент отпускания кнопки;
• input — происходит в режиме реального времени.

range.addEventListener("change", () => console.log(range.value));

Источник

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность хранить строковые значения в локальных или сеансовых переменных. Переменная localStorage может сохраняться между сеансами и может иметь любой размер. Это похоже на cookie, но имеет гораздо меньше ограничений.

В этом руководстве мы будем использовать механизм localStorage для хранения текущего состояния формы. Это означает, что когда страница перезагружается или пользователь повторно открывает страницу после ее закрытия, форма заполняется предыдущими значениями. Для повышения сложности мы будем хранить данные в виде сериализованных строк JSON.

Приступим

Для начала нам нужно создать плагин jQuery. Это позволит нам передавать параметры, определять настройки по умолчанию и поддерживать возможность передачи по цепочке.

(function ( $ ) < $.fn.FormCache = function( options ) < var settings = $.extend(< >, options ); return this.each(function() < var element = $(this); >); >; >( jQuery ));

Первое, что нам нужно сделать, это проверить поддержку браузером нового функционала хранилища HTML5. Для этого мы просто проверяем, что класс Storage определен правильно. Мы сделаем это в функции return .each оболочки плагина. На этом этапе следует отметить, что некоторые браузеры не включают локальное хранилище для локальных HTML-файлов, вам нужно будет запустить его на вашем веб-сервере, чтобы проверить функциональность должным образом.

if(typeof(Storage)!==»undefined») < >else

HTML-код формы

 
Firstname: Surname: Email: Website: Password: )(?=.*[a-z])(?=.*[A-Z]).*$" placeholder="******" required /> Is this checked?: Is this checked?: Option 1 Option 2 Option 3 Option 4  

Инициализация хранилища

Теперь, когда мы подтвердили, что браузер поддерживает локальное хранилище, первое, что нам нужно сделать, — это создать ключ, который будет определять наши данные в хранилище. Для этого я использую атрибут name формы, но вы также можете легко использовать атрибут ID. Затем мы проверяем, содержит ли объект localStorage значение для нашего ключа. Если все в порядке, мы будем использовать функцию JSON.parse для автоматического анализа текущего значения. Если данные не сериализуются или не заданы, мы инициализируем их с помощью функции JSON.stringify .

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

var key = element.attr('name'); var data = false; if(localStorageФорма html была изменена) < data = JSON.parse(localStorageФорма html была изменена); >if(!data) < localStorageФорма html была изменена = JSON.stringify(<>); data = JSON.parse(localStorageФорма html была изменена); >

Кэшируем данные формы

Чтобы сохранить значения форм в localStorage, нам нужно знать, когда они будут изменены. Для этого мы используем событие jQuery .change . Мы свяжем событие .change с функцией on_change сразу после инициализации нашего хранилища.

element.find('input, select').change(on_change);

Наша функция on_change будет принимать один параметр, объект event jQuery. Из объекта event мы будем использовать свойство .target , чтобы получить измененный элемент формы. Затем мы определим его родительскую форму с помощью .parents и получим ее имя для восстановления нашей инициализированной строки JSON из localStorage. Элемент checkbox не использует атрибут value , поэтому для правильного определения, если он отмечен, мы будем использовать функцию .is . Для других входных данных мы будем просто использовать .val как обычно.

Как только мы получим объект data , нам нужно будет преобразовать его обратно в строку, используя JSON.stringify , и обновить объект localStorage.

function on_change(event) < var input = $(event.target); var key = input.parents('form:first').attr('name'); var data = JSON.parse(localStorageФорма html была изменена); if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') < data[input.attr('name')] = input.is(':checked'); >else < data[input.attr('name')] = input.val(); >localStorageФорма html была изменена = JSON.stringify(data); >

Получение данных из хранилища

Теперь, когда у нас есть возможность кэшировать значения форм, нам нужно будет извлечь их обратно во время загрузки страницы и автоматически заполнить значения полей. Чтобы сделать это, мы просто выбираем каждый элемент в зависимости от его типа и устанавливаем значение с помощью .val , либо устанавливаем атрибут checked для элемента checkbox . Чтобы сделать checkbox не отмеченным по умолчанию, мы просто удаляем атрибут checked , используя .removeAttr .

Полный код

Если вы выполнили все вышеуказанные шаги, в итоге у вас должен получиться следующий код:

(function ( $ ) < $.fn.FormCache = function( options ) < var settings = $.extend(< >, options ); function on_change(event) < var input = $(event.target); var key = input.parents('form:first').attr('name'); var data = JSON.parse(localStorageФорма html была изменена); if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') < data[input.attr('name')] = input.is(':checked'); >else < data[input.attr('name')] = input.val(); >localStorageФорма html была изменена = JSON.stringify(data); > return this.each(function() < var element = $(this); if(typeof(Storage)!=="undefined")< var key = element.attr('name'); var data = false; if(localStorageФорма html была изменена) < data = JSON.parse(localStorageФорма html была изменена); >if(!data) < localStorageФорма html была изменена = JSON.stringify(<>); data = JSON.parse(localStorageФорма html была изменена); > element.find('input, select').change(on_change); element.find('input, select').each(function() < if($(this).attr('type') != 'submit') < var input = $(this); var value = data[input.attr('name')]; if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') < if(value) < input.attr('checked', input.is(':checked')); >else < input.removeAttr('checked'); >> else < input.val(value); >> >); > else < alert('local storage is not available'); >>); >; >( jQuery ))

Использование плагина

Чтобы начать использовать плагин, все, что нам нужно сделать, это вызвать его, используя обычную функцию document ready и простой селектор форм.

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

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

2 комментария на «Сохранение данных в форме после обновления страницы»

эм. Что-то код не кэширует вообще никакие данные. Скопировал полностью код. вставил форму, для теста. для теста подрубил jquery и указал id формы которую необходимо кэшировать.
Ни ошибок, ни кэширования — нет))) локальное — пустое) Google chrome Версия 80.0.3987.163

Возможно вы запускаете код с локального HTML файла. Файл нужно запустить на хостинге, веб-сервере или локальном веб-сервере, таком, как например, Open Server.

Источник