Скрипт збереження даних в текстових полях за допомогою 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? Приєднуйтесь

KovelX - безкоштовні оголошення

Photo KovelX
Photo KovelX
350 грн.
Photo KovelX
Photo KovelX
Договірна
Photo KovelX
Договірна
Photo KovelX
Photo KovelX
25 грн.
Photo KovelX
45 грн.
Photo KovelX
Договірна
Photo KovelX
Договірна
Photo KovelX
130 грн.
Photo KovelX
250 грн.
Photo KovelX
200 грн.
Photo KovelX
250 грн.
Photo KovelX
200 грн.

Читайте нас також: