Формы — мой небольшой способ сохранять клиентам нервы, а компаниям доход

18 Июн
2012

Cookies? Сессии? Нет, спасибо.


image
На блоге были неоднократно описаны разные методики, способы, как сделать так, чтобы клиенту не доводилось повторно заполнять длинную форму, если, к примеру, регистрация прошла неудачно.
Были удачные примеры, были и те которые мне лично просто не понравились по каким-то причинам. Недавно этот вопрос у меня поднялся вновь и я набросал для себя кое какой код.
Далее под катом.
Алгоритм его работы следующий:
  • находим все элементы формы на странице, куда требуется ввести текст (input)
  • принудительно добавляем им событие в onchange, которое следит, чтобы данные сохранялись при изменении
  • естественно, после загрузки DCOM модели мы эти данные считываем и расставляем по инпутам

Вроде бы все просто. Вот мой функционал.
Сохраняем наши ключи
function save(key, value) { // записать значение
localStorage.setItem(key, value);
//alert("Сохранили ключ "+key+" со значением "+value);
}

Считываем их
function read(key) { // получить значение
var retrievedObject = localStorage.getItem(key);
//alert("Прочитали ключ "+key+" со значением "+retrievedObject);
return retrievedObject;
}

Удаляем обнуляем
function remove(key) { // удалить значение
//alert("Очистили ключ "+key+" со значением "+localStorage.key);
localStorage.setItem(key, "");
}

Обновляем значение
function update_value(id,key)
{
new_value = read(key);
document.getElementById(id).value = new_value;
//alert("Обновили поле формы с id "+id+" значением "+new_value);
}

Это был, так сказать, основной процедурный код (JS). Теперь надо бы подключить jquery и сделать (как говорилось выше), чтобы все это заработало. У меня это выглядит примерно следующим образом:
$(document).ready(function() {
var rgElems = $("#xxx").find("input").each(function() {
id_for_update = this.id;
name_for_read = this.name;
update_value(id_for_update,name_for_read);
$('#' + id_for_update).bind("change", function()
{
save(this.name,this.value);
});
});
});

В общем и целом, что мы будем иметь после этого:
  • поля вроде input type=text будут сохраняться в локальном хранилище
  • неправильная регистрация (к примеру) не будет приводить клиента в бешенство
  • это может быть доработано вами, как видите, ничего сверх естественного
Какие минусы у данного плагина (кому хочется скачать, качайте, дорабатывайте, используйте, комментируйте):
  • работает только там, где HTML 5 является нормой (в IE 9, как ни странно, все работает)
  • слишком сырой код, его можно дорабатывать еще очень долго
Проверял в следующих браузерах:
  • MS IE 9.0
  • Chrome, Chromium
  • Firefox 12

Загрузить пример можно по
ссылке №1 или ссылке №2 (без рекламы)
P.S. Я намеренно не стал говорить об очень серьезном недостатке этого метода, так как надеюсь, что добрые блогавчане помогут мне советом скажут, где я был не прав, чтобы я (или кто-то другой) смог довести этот код до ума.
Пожалуйста, если вы расширите этот код, поделитесь со всеми в комментариях.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх