JavaScript – приклад розширення форми реєстрації

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

У минулій статті JavaScript для початківців ми розглянули принципи програмування на JavaScript і навіть розглянули невеликий приклад модифікації даних на сторінці без її перезавантаження, так би мовити освоїли ази цієї мови програмування, а сьогодні спробуємо написати вже програму складніша, яку можна буде, до речі, застосувати на цьому сайті.

Тепер давайте по порядку, поясню завдання, у нас є простенька форма реєстрації з трьома полями: Ім’я, email, пароль. Але припустимо, користувач захотів відразу при реєстрації вказати більше інформації про себе, для цього ми зробимо кнопку «звичайна форма»І«розширена форма», Після натискання на яку плавно з’являтиметься інша частина форми, з додатковими полями. Так, ще як Ви знаєте дуже часто на сайтах реалізовано перевірка даних, що вводяться, але на багатьох ці дані перевіряють серверні скрипти, що для користувача не зручно. Припустимо, він не заповнив обов’язкове поле і натиснув «зареєструватися»І всі ці дані полетіли на сервер, він їх там обробить і тільки потім відправить повідомлення про помилку, що«Форма заповнена неправильно», Як Ви розумієте на все це потрібен час, а користувач не любить чекати. Тому для зручності користувача ми організуємо таку перевірку на мові JavaScript без звернення до сервера (на сервері само собою буде перевірка!), Для того щоб користувач міг миттєво побачити, що він заповнив форму неправильно.

Нашу задачу я вирішив саме так, як буде представлено в прикладі нижче, не судіть строго, у кого є пропозиції получше, пишіть в коментарях.

Для початку подивіться на те, що вийшло, відразу скажу, що візуальне оформлення можете змінити, як хочете. А потім розберемо все більш детально, до речі, в коді теж будуть коментарі. Даний приклад точно працює в браузерах: Mozilla Firefox, Google-Chrome і Opera.

Все це реалізовано на JavaScript, поясню загальну картину, так би мовити сам алгоритм роботи даної програми. Розповідати детально про код HTML, я думаю, не варто, хоча я його тут теж вказав і трошки описав.

Все починається з функції, яка буде призначати обробник події для події onsubmit, тобто ця подія викликається при натисканні кнопки на формі з типом submit. Це реалізовано за допомогою window.onload, тобто після завантаження всієї сторінки події onsubmit призначається обробник події функція proverka. Яка, з назви випливає, перевіряє чи всі обов’язкові поля, заповнив користувач, і видає відповідне повідомлення. У нас буде три обов’язкових поля: Ім’я, email, пароль. І якщо хоч одне не заповнено, то вона про це повідомить, причому із зазначенням яке саме поле не заповнено. Так до речі, так як в нашому прикладі нікуди відправляти дані з форми, я в будь-якому випадку нікуди їх не відправляю, в коді знайдіть позначку про те, щоб зняти це обмеження, і Ви могли, якщо всі дані заповнені правильно, відправляти їх на сервер, так, до речі, Вам потрібно буде налаштувати ще серверні скрипти для обробки цих даних.

Переходимо далі, і тут у нас йде одна з найголовніших функцій, я її назвав isMore. Ця функція циклом додає все поля (у нас додавання кожного поля робить окрема функція). Щоб було зрозуміліше, вона не додає поля, вона запускає по черзі з невеликим інтервалом ті функції, які і додають ці самі поля. Це зроблено для того щоб був ефект плавного появи цих полів. І в кінці цієї функції ми міняємо напис «звичайна форма»На«розширена форма», Щоб користувач міг бачити на яку форму йому потрібно перейти в разі такої необхідності. І ще вона перевіряє, чи відкрита наша розширена форма чи ні, шляхом знайти код metka, в разі знаходження цієї мітки вона розуміє що форма відкрита і закриває її, а у разі якщо не знаходить, то функція розуміє що розширену форму потрібно відкрити.

Далі йде функція isNormal, яка повертає все назад, шляхом видалення всіх доданих елементів за допомогою циклу for, насправді вона робить це не сама, а з допомогою функції deleteTR. Функція isNormal, точно також як і isMore, по черзі з невеликим інтервалом запускає функцію, тільки тепер для видалення цих самих полів, зроблено це також для того, щоб поля зникали плавно.

Також в коді Ви виявите таку функцію як alignCenter, вона зроблена тільки для того щоб все додані елементи були відцентровані.

Далі йде 6 функцій кожна, з яких додає в нашу форму по одному полю. Загальний принцип цих функцій такий, спочатку ми отрісовиваємих рядок (тег tr), потім стовпець (тег td), а потім вже наповнюємо їх потрібними нам елементами, наприклад

var input = document.createElement ( “INPUT”);

input.setAttribute ( “type”, “text”);

input.setAttribute ( “id”, “metka”);

input.setAttribute ( “name”, “lastName”);

td.appendChild (input);

тут ми створили на формі елемент input, створили у нього 3 атрибута, і прив’язали його до нашої осередку.

Решта функцій реалізовані за таким же принципом.

Весь код представлений нижче, Ви також можете завантажити архів, в якому готовий скрипт і HTML файл.

Код JavaScript – приклад розширення форми

Код скрипта JavaScript –

// пишемо функцію для прив’язки події onsubmit нашої форми
window.onload = function () {
var myform = document.getElementById ( “myForm”); // знаходимо елемент нашої форми по id
myform.onsubmit = proverka / * прив’язуємо подія onsubmit по настанню якого
буде запускатися функція proverka * /
}
// пишемо функцію для циклічного запускання функцій по додаванню полів
function isMore () {
var form = document.getElementById ( “myTable”); // знаходимо елемент таблиця по її id
if (! document.getElementById ( “metka”)) {/ * умова за яким функція буде
визначати відкрита чи форма чи ні * /
for (var i = 1; i<= 6; i ++) {/ * якщо форма закрита, то циклом з таймаут
запускаємо функції додавання полів * /
var p = “pole” + i + “()”; // формування назви нашої функції
var t1 = i * 100; // розрахунок часу таймаута
var t = 100 + t1; // розрахунок часу таймаута
setTimeout (p, t) / * запуск функцій через певний
кількість часу * /
}
var myIn = document.getElementById ( “myIn”); / * знаходимо кнопку «розширена форма»
по id * /
myIn.setAttribute ( “value”, “Звичайна форма”); / * міняємо назву
кнопки на «звичайна форма» * /
myIn.removeAttribute ( “ONCLICK”); / * видаляємо атрибут ONCLICK, для того
щоб в процесі виконання коду сам
код не можна було запустити ще раз * /
}
else
isNormal (); / * якщо форма вже відкрита, то запускаємо функцію з видалення
полів для розширеної форми * /
}
// функція по запуску плавного видалення полів форми
function isNormal () {
var form = document.getElementById ( “myTable”); // знаходимо елемент таблиця по її id
var del = form.getElementsByTagName ( “TR”); // знаходимо все теги tr в нашій таблиці
for (var i = 9; i < del.length; i -) {/ * цикл по запуску функцій для
видалення полів, з таймаут * /
if (i == 3) {/ * якщо цикл доходить до 3 поля то він припиняється,
щоб у нас обов’язкові поля не вилучено * /
break;
} else
var fun = “deleteTR” + “(” + i + “)”; / * формування назви функції по
видалення нашої рядки в таблиці,
тобто всіх полів в цьому рядку * /
var t1 = i * 100; // розрахунок часу таймаута
var t = 1000 – t1; // розрахунок часу таймаута
setTimeout (fun, t) // запуск функцій через певну кількість часу
}
var myIn = document.getElementById ( “myIn”); // знаходимо кнопку «звичайна форма» по id
myIn.setAttribute ( “value”, “Розширена форма”); / * міняємо назву кнопки на
«Розширена форма»,
так як ми її згорнули * /
}
// функція з видалення рядків, параметром передаємо номер рядка
function deleteTR (number) {
var form = document.getElementById ( “myTable”); // знаходимо елемент таблиця по її id
var del = form.getElementsByTagName ( “TR”); // знаходимо все теги tr в нашій таблиці
del [number] .parentNode.removeChild (del [number]); // видаляємо потрібну нам рядок
}
// функція для перевірки правильності заповнення форми
function proverka () {
var proverkaName = document.getElementById ( “prName”); // знаходимо елемент «ім’я» по id
var proverkaEmail = document.getElementById ( “prEmail”); // знаходимо елемент «email» по id
var proverkaPsw = document.getElementById ( “prPsw”); // знаходимо елемент «пароль» по id
// умова перевірки полів
if (proverkaName.value == “” || proverkaEmail.value == “” || proverkaPsw.value == “”) {
proverkaName = (proverkaName.value)? “”: “Поле – ім’я \ n”
/ * Якщо в поле «ім’я» порожньо то в змінну proverkaName вставляємо “Поле – ім’я”, для
виведення в попереджувальному повідомленні * /
proverkaEmail = (proverkaEmail.value)? “”: “Поле – email \ n”
/ * Якщо в поле «email» порожньо то в змінну proverkaEmail вставляємо “Поле – email”, для
виведення в попереджувальному повідомленні * /
proverkaPsw = (proverkaPsw.value)? “”: “Поле – пароль \ n”
/ * Якщо в поле «пароль» порожньо то в змінну proverkaPsw вставляємо
“Поле – пароль”, для виведення в попереджувальному повідомленні * /
alert ( “Не заповнені наступні обов’язкові поля: \ n” + proverkaName + proverkaEmail + proverkaPsw);
/ * Формуємо попереджувальне повідомлення * /
return false; / * припиняємо виконання події onsubmit,
для того щоб наші «неправильні» дані не вирушили на сервер * /
}
else {
// повідомлення що дані заповнені правильно і вирушили на сервер
alert ( “Дані успішно відправлені на сервер \ nПрімечаніе: \ nНа насправді ці дані \
нікуди не відправлені, Вам потрібно налаштувати прийом цих даних на своєму \
сервері, тобто налаштувати серверні скрипти “);
return false; / * для застосування на чинному сайті цей рядок необхідно видалити !!!
а то в разі правильного заповнення форми дані все одно не відправляться * /
}
}
// функція вирівнювання полів по центру
function alignCenter () {
var form = document.getElementById ( “myTable”); // знаходимо елемент таблиця по її id
var alCentr = form.getElementsByTagName ( “TR”) // знаходимо все теги tr в нашій таблиці
for (var i = 0; i < alCentr.length; i ++) {/ * циклом переберемо всі рядки
таблиці додаємо їм атрибут align * /
alCentr [i] .setAttribute ( “align”, “center”); // додаємо рядках атрибут align
}
}
/ * Далі йдуть функції по додаванню рядків в нашу форму,
іншими словами полів форми, вони всі однотипні, тому прокоментую тільки першу * /
function pole1 () {
var form = document.getElementById ( “myTable”); // знаходимо елемент таблиця по її id
var tr = document.createElement ( “TR”); // Створюємо елемент tr
form.appendChild (tr); // Прив’язуємо його до нашої таблиці
var td = document.createElement ( “TD”); // Створюємо елемент td
tr.appendChild (td); // Прив’язуємо його до нашої рядку
var text = document.createTextNode ( “По батькові:”); // Створюємо текстовий вузол
td.appendChild (text); // Прив’язуємо його до нашої осередку
var td = document.createElement ( “TD”); // Створюємо другий елемент td, тобто другий стовпець
tr.appendChild (td); // Прив’язуємо його до нашої рядку
var input = document.createElement ( “INPUT”); // Створюємо елемент INPUT, для введення даних
input.setAttribute ( “type”, “text”); // Додаємо атрибут
input.setAttribute ( “id”, “metka”); // Додаємо атрибут
input.setAttribute ( “name”, “lastName”); // Додаємо атрибут
td.appendChild (input); // Прив’язуємо його до нашої осередку
alignCenter (); // Запускаємо функцію для вирівнювання по центру
}
function pole2 () {
var form = document.getElementById ( “myTable”);
var tr = document.createElement ( “TR”);
form.appendChild (tr);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var text = document.createTextNode ( “Пол:”);
td.appendChild (text);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var input = document.createElement ( “INPUT”);
input.setAttribute ( “type”, “RADIO”);
input.setAttribute ( “name”, “sex”);
input.setAttribute ( “value”, “man”);
td.appendChild (input);
var text = document.createTextNode ( “Чоловічий”);
td.appendChild (text);
var input = document.createElement ( “INPUT”);
input.setAttribute ( “type”, “RADIO”);
input.setAttribute ( “name”, “sex”);
input.setAttribute ( “value”, “woman”);
td.appendChild (input);
var text = document.createTextNode ( “Жіночий”);
td.appendChild (text);
alignCenter ();
}
function pole3 () {
var form = document.getElementById ( “myTable”);
var tr = document.createElement ( “TR”);
form.appendChild (tr);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var text = document.createTextNode ( “Рік народження”);
td.appendChild (text);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var input = document.createElement ( “INPUT”);
input.setAttribute ( “type”, “text”);
input.setAttribute ( “name”, “god”);
td.appendChild (input);
alignCenter ();
}
function pole4 () {
var form = document.getElementById ( “myTable”);
var tr = document.createElement ( “TR”);
form.appendChild (tr);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var text = document.createTextNode ( “Країна”);
td.appendChild (text);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var input = document.createElement ( “INPUT”);
input.setAttribute ( “type”, “text”);
input.setAttribute ( “name”, “coutry”);
td.appendChild (input);
alignCenter ();
}
function pole5 () {
var form = document.getElementById ( “myTable”);
var tr = document.createElement ( “TR”);
form.appendChild (tr);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var text = document.createTextNode ( “Місто”);
td.appendChild (text);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var input = document.createElement ( “INPUT”);
input.setAttribute ( “type”, “text”);
input.setAttribute ( “name”, “city”);
td.appendChild (input);
alignCenter ();
}
function pole6 () {
var form = document.getElementById ( “myTable”);
var tr = document.createElement ( “TR”);
form.appendChild (tr);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var text = document.createTextNode ( “Доп. інформація”);
td.appendChild (text);
var td = document.createElement ( “TD”);
tr.appendChild (td);
var input = document.createElement ( “TEXTAREA”);
input.setAttribute ( “rows”, “6”);
input.setAttribute ( “cols”, “21”);
input.setAttribute ( “name”, “dopinfo”);
td.appendChild (input);
alignCenter ();
var myIn = document.getElementById ( “myIn”); // знаходимо кнопку «розширена форма» по id
myIn.setAttribute ( “ONCLICK”, “isMore ()”); // повертаємо їй атрибут ONCLICK
}

Код HTML – приклад розширення форми

<form id = “myForm”>
<table id = “myTable” border = “5” cellpadding = “10” cellspacing = “0” bgcolor = “# 4EAEC1”>
<tr align = “center” bgcolor = “green” >
<td Width = 180>
<input type = “button” value = “Розширена форма” ONCLICK = “isMore ();” id = “myIn” />
</ td>
<td Width = 200>
<input type = “submit” value = “Зареєструватися” METHOD = “POST” />
<! – поставте тут атрибут action–>
</ td>
</ tr>
<tr align = “center”>
<td>ім’я:</ td>
<td>
<input type = “text” name = “name” id = “prName” />
</ td>
</ tr>
<tr align = “center”>
<td>E-mail:</ td>
<td>
<input type = “text” name = “email” id = “prEmail” />
</ td>
</ tr>
<tr align = “center”>
<td>пароль:</ td>
<td>
<input type = “password” name = “psw” id = “prPsw” >
</ td>
</ tr>
</ table>
</ form>

Якщо Ви уважно подивилися код, то помітили, що на початку (в функції isMore) Я видаляю атрибут ONCLICK у елемента форми, а в кінці (в функції pole6), Я його додаю тому, це зроблено для того, якщо раптом в процесі виконання нашого коду користувач раптом захоче ще кілька разів поспіль натиснути на цю кнопку і відповідно запустить кілька разів нашу програму, тому я видаляю прив’язку події до кнопки на початку виконання програми, а в кінці повертаю назад.

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

Та ще, якщо Ви вирішите застосувати даний скрипт у себе на сайті, то не забудьте в формі у елемента input з типом submit поставити атрибут ACTION з необхідним значенням (сторінку, яка буде приймати дані з форми), І в скрипті видалити рядок return false, в коментарях це позначено.

Сподіваюся, цей приклад був вам корисний, і Ви хоч трохи навчилися писати і розуміти код JavaScript. У наступних статтях продовжимо вивчення мови програмування JavaScript.

Ссылка на основную публикацию