Автозаполнение форм оффлайн

Привет, %username%!
Хочу поделиться одной занимательной историей, которая произошла на моей работе.
Одной сотруднице начальство поставило задачу: провести анкетирование всех наших партнеров и внести данные через форму на внутреннем сайте. Форма достаточно внушительная, содержит множество полей разных типов (текстовые, выпадающие списки, чекбоксы и т.д.) Да и партнеров тоже немалое количество.
Доступа к внутреннему сайту у них, разумеется, нет, поэтому сами они эту форму заполнить не могут. В общем, прикинув объем работы, пришла эта сотрудница за помощью в наш IT-отдел.
И вот какое решение было придумано.

Концепция

Взаимодействие с партнерами осуществляется через email, поэтому в общем виде нужно было отправить каждому партнеру анкету, получить данные, а потом перенести все это на внутренний сайт.

И какие варианты?

Вариант с сохранением анкеты под расширением *.doc и последующим открытием в Word'е выглядел неоптимальным. Во-первых, Word 2003 криво обрабатывал выпадающие списки, а во-вторых, потом все равно пришлось бы вручную переносить данные на сайт.
В итоге ставка была сделана на великий и могучий русский язык javascript. Также хотелось сделать некоторое универсальное решение для такого рода задач.

Оптимизация 1: получение данных

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

После заполнения всех полей нажмите "Сохранить" и вставьте текст в письмо
Сохранить



Заполнив все поля, партнер просто нажимает кнопку, затем копирует полученный текст и по email отправляет нам.

Функция _save(), которая собирает значения с элементов формы, формирует json и записывает его в textarea, выглядит так:

function _save()
{
 var txtstorageID = '_txtstorage';
 var str = '{';
 
 var tags = ['select', 'input', 'textarea'];
 var input_escape = ['hidden', 'button', 'submit', 'reset'].join('_');
 for(var i = 0; i < tags.length; i++) {
 var elems = document.getElementsByTagName(tags[i]);
 for(j = 0; j < elems.length; j++) {
 if(elems[j].name == txtstorageID || elems[j].name == '') continue;
 if(tags[i] == 'input' && (input_escape.indexOf(elems[j].type) > -1)) continue;
 var v = '"'+elems[j].value+'"';
 if(tags[i] == 'input' && elems[j].type=='checkbox') v = elems[j].checked;
 str += '"'+elems[j].id+'":'+v+', ';
 }
 }
 
 str = str.substr(0, str.length-2); 
 str += '}';
 str = 'var d = '+str+'; for(i in d) {var e = document.getElementById(i); if(e==null) continue; if(e.type=="checkbox") e.checked=d[i]; else e.value=d[i];};';
 document.getElementById(txtstorageID).value = str;
}


Приятно, что этот довесок к исходному Html-коду станицы всегда одинаков и может быть использован для любой анкеты (ограничения конечно есть, о них ниже).

Оптимизация 2: автозаполнение форм

Вообще, задача автозаполнения форм путем «перетаскивания» значений, взятых из некоторого источника (например, email), показалась мне весьма перспективной. Ведь большинство операционных сотрудников ежедневно вручную вводят множество данных в одни и те же формы. Осталось придумать формат (JSON?) и некий «раскладыватель» значений по странице. Но вернемся к нашим баранам партнерам.
То, что пришло в голову мне, хоть и выглядит грубовато, но работает и не требует от пользователя особых усилий:
  • сотрудница открывает анкету на внутреннем сайте
  • копирует в адрес браузера следующую строчку:
    javascript: var a = prompt('Данные клиента:'); eval(a); void(0);
  • в появившейся prompt копирует текст от партнера и — вуаля! — форма заполнена
Примечание: для чего нужен prompt? почему бы сразу не вставить выполняемый код в адресную строку?
Дело в том, что максимальная длина url ограничена (порядка 2000 символов, зависит от браузера). А поскольку данное решение предполагается именно для больших форм, то этот момент становится критичным.

Ограничения

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

Но для статических форм (особенно различных корпоративных заявок) получилось весьма полезно. Надеюсь, не только мне.
Спасибо за внимание!


0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.