Скрипт збереження даних в текстових полях за допомогою jQuery

Цей дуже простий скрипт, що використовує бібліотеку jQuery, зберігає текст, набраний в потрібних нам текстових полях навіть після перезавантаження сторінки. Це дуже потрібно в багатьох випадках. Наприклад, користувач пише повідомлення, і після написання декількох абзаців комп'ютер зависає. Що відбувається? Всі дані знищуються. За допомогою методу, описаного в даній статті, введені користувачем дані залишатимуться в полі навіть після перезавантаження системи.

Даний скрипт також допоможе збільшити кількість конверсій на сайті. Кожна заповнена форма - це нове замовлення, ще один коментар або нова заявка на роботу. Тому потрібно поважати час користувача і давати йому можливість скористатися другим шансом.

Як це працює?

За допомогою простого скрипта ми виконаємо наступну задачу: всі дані, які користувач вводить у форму, будуть моментально зберігатися в cookies без участі користувача. При оновленні сторінки скрипт сам додасть текст у вже заповнені поля. Таким чином, при оновленні сторінки користувачеві не доведеться заново заповнювати вашу форму.

За допомогою класів-маркерів ми можемо вказати, які дані потрібно запам'ятовувати, а які не грають великої ролі, а значить, ними можна знехтувати. При підтвердженні форми всі дані будуть стиратися, щоб заповнена форма після відправки залишалася порожньою. Це логічно і правильно. Однаково зберігаються дані як з текстових полів, так і текстових блоків (textarea).

Якщо кому цікаві технічні подробиці, то для збереження і читання даних буде використовуватися плагін jQuery Storage (автор Dave Schindler). Скачайте його звідси і не забудьте підключити.

Налаштування

Для роботи скрипту необхідно підключити файл "mysaveforms.js" (код описаний нище). Переконайтеся, що у вас підключений jQuery версії не старіше 1.7.

Для початку потрібно вказати, які саме поля потрібно зберігати і заповнювати автоматично. Для цього додамо їм клас "mySaveForms". Наприклад, текстове поле буде виглядати так:
<input type="text" class="myClass ... mySaveForms" value="" />

Далі, в самий кінець коду, перед "</body>" підключаємо скрипт:
<script type="text/javascript" src="/mysaveforms.js"></script>

Стирання даних

У тому випадку, якщо форма заповнена і підтверджена, дані більше не потрібні і їх потрібно стерти. Щоб видалити всі записи скрипта, додайте кнопці підтвердження форми клас "mySaveFormsSubmit". При кліку по цій кнопці збережені в cookies дані будуть стерті. На дію кнопки це ніяк не вплине. Приклад такої кнопки:
<button class="mySaveFormsSubmit" type="submit">Відправити</button>

Зверніть увагу: поля будуть автоматично заповнюватися при завантаженні сторінки. Це означає, що форми або окремі поля, які будуть динамічно створюватися після завантаження, заповнені не будуть. Це навряд чи вам завадить, але знання - як і раніше сила, майте на увазі.

Код простий. Спочатку підключається читання з cookies і далі сам скрипт:

(function mySaveForms( ) {
var text, cl;
$(".mySaveForms").each(function(i) {
cl = "mySaveForms"+i;
$(this).addClass(cl);
text = $.Storage.get(cl);
if (text && text.length > 0 && !$(this).val()) {
$(this).val(text);
}
});
$(".mySaveForms").keyup(function() {
$.Storage.set($(this).attr("class").split(" ")[$(this).attr("class").split(" ").length -1], $(this).val());
});
$(".mySaveFormsSubmit").click(function() {
$(".mySaveForms").each(function(i) {
$.Storage.remove("mySaveForms"+i);
});
});
})();
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Статистика: